/* BugHunt refresh: loaded after main.css. Ink ground, logo gradient used sparingly.
   Remove the <link> in header.php to go back to the previous look. */
:root {
  --heading-font: "Bricolage Grotesque", "IBM Plex Sans", sans-serif;
  --bh-ink: #0a0e1f;
  --bh-ink-2: #131a36;
  --bh-cyan: #20c0f0;
  --bh-blue: #4080e0;
  --bh-violet: #7020b0;
  --bh-grad: linear-gradient(135deg, var(--bh-cyan), var(--bh-blue) 48%, var(--bh-violet));
  --bh-paper: #f4f7fb;
  --bh-card: #ffffff;
  --bh-text: #1a2236;
  --bh-muted: #4f5b73;
  --bh-line: rgba(10, 14, 31, .12);
  --bh-on-ink: #f2f5fb;
  --bh-on-ink-muted: #aab4cc;
  --bh-link: #0a4f9e;
  --bh-space-1: 8px; --bh-space-2: 16px; --bh-space-3: 24px; --bh-space-4: 32px; --bh-space-5: 48px; --bh-space-6: 80px; --bh-space-7: 120px;
}
.dark-theme {
  --bh-paper: #0f1220;
  --bh-card: #171b2e;
  --bh-text: #e8ecf6;
  --bh-muted: #a3adc4;
  --bh-line: rgba(255, 255, 255, .14);
  --bh-link: #7cb8ff;
}

h1, h2, h3, .about-title { letter-spacing: -0.02em; }

/* Primary nav button: solid fallback under the gradient so the label never lands on white. */
.header .btn-getstarted { background-color: #0a4f9e !important; }
html, body { overflow-x: clip; }

/* ---------- Buttons ---------- */
.bh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 12px 28px; border-radius: 999px; font: 600 1rem var(--default-font);
  text-decoration: none; border: 1.5px solid transparent;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.bh-btn--primary { background-color: #0a4f9e; background-image: var(--bh-grad); color: #fff; }
.bh-btn--primary:hover { transform: translateY(-2px); color: #fff; }
.bh-btn--ghost { color: var(--bh-on-ink); border-color: rgba(255,255,255,.4); }
.bh-btn--ghost:hover { border-color: #fff; color: #fff; }
.bh-btn:focus-visible, .bh-row:focus-visible, .bh-pcard:focus-visible { outline: 3px solid var(--bh-cyan); outline-offset: 3px; }

/* ---------- Hero ---------- */
.bh-hero {
  position: relative; overflow: hidden; background: var(--bh-ink); color: var(--bh-on-ink);
  padding: 170px 0 var(--bh-space-5);
}
.bh-hero__wash {
  position: absolute; top: 0; right: 0; width: min(34vw, 520px); height: 78%;
  background: var(--bh-grad); border-radius: 0 0 0 100%;
}
.bh-hero__inner { position: relative; }
.bh-hero h1 {
  font: 800 clamp(2.9rem, 8.4vw, 7rem)/0.98 var(--heading-font); letter-spacing: -0.035em;
  color: #fff; margin: 0 0 var(--bh-space-4); max-width: 11ch;
}
.bh-hero h1 em { font-style: normal; color: var(--bh-cyan); }
.bh-hero__lede { max-width: 40rem; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; color: var(--bh-on-ink-muted); margin: 0 0 var(--bh-space-5); }
.bh-hero__cta { display: flex; flex-wrap: wrap; gap: var(--bh-space-2); margin-bottom: var(--bh-space-6); }
.bh-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bh-space-3);
  border-top: 1px solid rgba(255,255,255,.16); padding: var(--bh-space-4) 0 0; margin: 0; list-style: none;
}
.bh-facts b { display: block; font: 700 clamp(1.8rem, 4vw, 3rem)/1 var(--heading-font); color: #fff; }
.bh-facts span { display: block; margin-top: 6px; font-size: .95rem; color: var(--bh-on-ink-muted); }
@media (max-width: 767px) {
  .bh-hero { padding-top: 130px; }
  .bh-hero__wash { width: 46vw; height: 30%; }
  .bh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--bh-space-4); }
}

/* ---------- Work sections ---------- */
.bh-section { background: var(--bh-paper); color: var(--bh-text); padding: var(--bh-space-6) 0; }
.bh-section + .bh-section { padding-top: 0; }
.bh-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--bh-space-3); margin-bottom: var(--bh-space-5); }
.bh-head h2 { font: 800 clamp(2rem, 4.6vw, 3.4rem)/1.04 var(--heading-font); color: var(--bh-text); margin: 0 0 var(--bh-space-1); }
.bh-head p { margin: 0; max-width: 34rem; color: var(--bh-muted); font-size: 1.1rem; }
.bh-more { color: var(--bh-link); font-weight: 700; text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.bh-more:hover { text-decoration: underline; }

.bh-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bh-space-3); }
.bh-pcard {
  position: relative; display: flex; flex-direction: column; gap: var(--bh-space-2); padding: var(--bh-space-4);
  background: var(--bh-card); border: 1px solid var(--bh-line); border-radius: 20px; color: var(--bh-text); text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}
.bh-pcard:hover { transform: translateY(-4px); border-color: var(--bh-blue); color: var(--bh-text); }
.bh-pcard__logo { width: 64px; height: 64px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid rgba(10,14,31,.1); display: grid; place-items: center; }
.bh-pcard__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bh-pcard h3 { font: 700 1.5rem/1.15 var(--heading-font); margin: var(--bh-space-1) 0 0; }
.bh-pcard p { margin: 0; color: var(--bh-muted); line-height: 1.55; }
.bh-pcard__tag { font-weight: 700; color: var(--bh-link); }
.bh-pcard--lead { grid-column: span 2; grid-row: span 2; background: var(--bh-ink); border-color: var(--bh-ink); color: var(--bh-on-ink); justify-content: flex-end; min-height: 380px; overflow: hidden; }
.bh-pcard--lead::before { content: ""; position: absolute; top: 0; right: 0; width: 38%; height: 52%; background: var(--bh-grad); border-radius: 0 20px 0 100%; }
.bh-pcard--lead h3 { font-size: clamp(2rem, 4vw, 3.2rem); color: #fff; }
.bh-pcard--lead p { color: var(--bh-on-ink-muted); font-size: 1.1rem; max-width: 34rem; }
.bh-pcard--lead .bh-pcard__tag { color: var(--bh-cyan); }
.bh-pcard--lead:hover { color: var(--bh-on-ink); }
.bh-pcard--lead .bh-pcard__logo { position: absolute; top: var(--bh-space-4); left: var(--bh-space-4); }

.bh-rows { border-top: 1px solid var(--bh-line); }
.bh-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; align-items: center; gap: var(--bh-space-3);
  padding: var(--bh-space-3) var(--bh-space-1); border-bottom: 1px solid var(--bh-line); color: var(--bh-text); text-decoration: none;
  transition: background-color .2s ease;
}
.bh-row:hover { background: color-mix(in srgb, var(--bh-blue), transparent 92%); color: var(--bh-text); }
.bh-row strong { font: 700 clamp(1.25rem, 2.4vw, 1.7rem)/1.15 var(--heading-font); }
.bh-row span { color: var(--bh-muted); }
.bh-row i { color: var(--bh-link); font-size: 1.25rem; }

@media (max-width: 991px) {
  .bh-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-pcard--lead { grid-column: span 2; grid-row: auto; min-height: 320px; }
}
@media (max-width: 600px) {
  .bh-pgrid { grid-template-columns: 1fr; }
  .bh-pcard--lead { grid-column: auto; }
  .bh-row { grid-template-columns: 1fr auto; }
  .bh-row span { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .bh-btn, .bh-pcard, .bh-row { transition: none; } .bh-btn--primary:hover, .bh-pcard:hover { transform: none; } }

/* ---------- Footer on the same ink ground ---------- */
.footer.gradient { background: var(--bh-ink) !important; background-image: none !important; border-top: 0; }

/* ================= Rest of the homepage ================= */
.light-background { --background-color: var(--bh-paper); }
.section { padding-block: var(--bh-space-6); }

/* Section titles: left-aligned, large, no decorative underline */
.section-title { text-align: left; padding-bottom: var(--bh-space-5); }
.section-title h2 { font: 800 clamp(2rem, 4.6vw, 3.4rem)/1.04 var(--heading-font); letter-spacing: -0.03em; color: var(--bh-text); }
.section-title h2::after, .section-title h2::before { display: none; }
.section-title p { margin: var(--bh-space-1) 0 0; max-width: 38rem; font-size: 1.1rem; color: var(--bh-muted); }

/* About */
.about .about-title { font: 800 clamp(2rem, 4.6vw, 3.4rem)/1.04 var(--heading-font); letter-spacing: -0.03em; }
.about .about-meta { color: var(--bh-link); font-weight: 700; letter-spacing: .06em; }

/* Process tabs */
.features .nav-tabs { border-radius: 999px; }
.features .nav-link.active { background-color: #0a4f9e; background-image: var(--bh-grad); }

/* The four principle cards: one calm style instead of four pastels */
.features-cards .feature-box, .features-cards .feature-box.orange, .features-cards .feature-box.blue,
.features-cards .feature-box.green, .features-cards .feature-box.red {
  background: var(--bh-card); border: 1px solid var(--bh-line); border-radius: 20px; text-align: left; padding: var(--bh-space-4);
  box-shadow: none; transition: border-color .2s ease;
}
.features-cards .feature-box:hover { border-color: var(--bh-blue); }
.features-cards .feature-box i, .features-cards .feature-box.orange i, .features-cards .feature-box.blue i,
.features-cards .feature-box.green i, .features-cards .feature-box.red i { color: var(--bh-link); font-size: 2rem; }
.features-cards .feature-box h4 { font: 700 1.3rem var(--heading-font); color: var(--bh-text); }
.features-cards .feature-box p { color: var(--bh-muted); }

/* Call-to-action bands share the hero's ink + gradient sweep */
.call-to-action .container.gradient, .call-to-action-2.gradient {
  background: var(--bh-ink) !important; background-image: none !important; color: var(--bh-on-ink);
  position: relative; overflow: hidden;
}
.call-to-action .container.gradient { border-radius: 28px; padding: var(--bh-space-6) var(--bh-space-3); }
.call-to-action .container.gradient::after, .call-to-action-2.gradient::after {
  content: ""; position: absolute; top: 0; right: 0; width: min(24vw, 300px); height: 62%;
  background: var(--bh-grad); border-radius: 0 0 0 100%; pointer-events: none;
}
.call-to-action .shape { display: none; }
.call-to-action .content { position: relative; z-index: 1; }
.call-to-action .content h2, .call-to-action-2 h3 { font: 800 clamp(2rem, 5vw, 3.6rem)/1.05 var(--heading-font); letter-spacing: -0.03em; color: #fff; }
.call-to-action .content p, .call-to-action-2 p, .call-to-action-2 small { color: var(--bh-on-ink-muted); }
.call-to-action .btn-cta { background-color: #0a4f9e; background-image: var(--bh-grad); color: #fff; border: 0; border-radius: 999px; }
.call-to-action-2 { border-radius: 28px; margin-inline: auto; max-width: 1200px; }
.call-to-action-2 .container { position: relative; z-index: 1; }

/* Stats */
.stats .stats-item span, .stats .stats-item span .purecounter { font-family: var(--heading-font); font-weight: 800; letter-spacing: -0.03em; }

/* Services */
.services .service-card { background: var(--bh-card); border: 1px solid var(--bh-line); border-radius: 20px; box-shadow: none; transition: border-color .2s ease; }
.services .service-card:hover { border-color: var(--bh-blue); transform: none; }
.services .service-card h3 { font-family: var(--heading-font); font-weight: 700; color: var(--bh-text); }

/* FAQ */
.faq-9 .faq-title { font: 800 clamp(2rem, 4vw, 3rem)/1.05 var(--heading-font); letter-spacing: -0.03em; }
.faq-9 .faq-item { border-radius: 16px; }
.faq-9 .faq-arrow { display: none !important; }

/* Contact: ink info panel, rounded form */
.contact .info-box.gradient { background: var(--bh-ink) !important; background-image: none !important; border-radius: 24px; }
.contact .contact-form { border-radius: 24px; border: 1px solid var(--bh-line); box-shadow: none; }
.contact .contact-form .btn, .contact .contact-form button[type="submit"] { background-color: #0a4f9e; background-image: var(--bh-grad); border: 0; border-radius: 999px; color: #fff; min-height: 48px; }
.contact .contact-form h3 { font-family: var(--heading-font); font-weight: 800; letter-spacing: -0.02em; }

/* Inner-page title bars (About, Portfolio, Blog, Terms) */
.page-title { background: var(--bh-ink) !important; color: var(--bh-on-ink); padding: 150px 0 var(--bh-space-5); position: relative; overflow: hidden; }
.page-title::after { content: ""; position: absolute; top: 0; right: 0; width: min(26vw, 340px); height: 100%; background: var(--bh-grad); border-radius: 0 0 0 100%; pointer-events: none; }
.page-title .container { position: relative; z-index: 1; text-align: left; }
.page-title h1 { font: 800 clamp(2.6rem, 7vw, 5rem)/1 var(--heading-font); letter-spacing: -0.035em; color: #fff; margin: 0 0 var(--bh-space-2); }
.page-title .breadcrumbs ol { justify-content: flex-start; }
.page-title .breadcrumbs, .page-title .breadcrumbs a, .page-title .breadcrumbs li { color: var(--bh-on-ink-muted); }
.page-title .breadcrumbs .current { color: #fff; }