/* Bidoft homepage — coded template, scoped entirely under .bidoft-home so it
   never leaks into product pages or other marketing pages. Reuses the global
   --bidoft-* tokens where they already fit (ink, border, radii) and adds a
   small set of homepage-only tokens for the new hero palette, sampled from
   the approved homepage reference design and adjusted where needed to pass
   WCAG AA (see the build report for the exact adjustments and why). */

.bidoft-home {
  /* Palette approved from the hero CTA reference artwork; same hierarchy
     as header-footer.css/product.css. blue/blue-mid are non-text
     decorative+icon roles so they can sit at "bright"; blue-dark is the
     hover/active darkening step; home-text is the functional link/label
     color (secondary accent, 5.51:1); hero-accent is the large H1 second
     line (3:1 threshold, mid blue reads well and still passes normal
     text at 5.56:1); hero-accent-dark is the handwritten script color. */
  --bidoft-home-ink: #0B1830;
  --bidoft-home-blue: #016AE5;
  --bidoft-home-blue-dark: #022D7B;
  --bidoft-home-blue-mid: #016AE5;
  --bidoft-home-text: #0460E5;
  --bidoft-home-muted: #55606B;
  --bidoft-home-border: #E2ECF5;
  --bidoft-home-tint: #EAF6FE;
  --bidoft-home-surface: #FFFFFF;
  --bidoft-hero-accent: #0168C4;
  --bidoft-hero-accent-dark: #014BAA;
  --bidoft-hero-font: 'Manrope', sans-serif;
  --bidoft-home-font-heading: 'Space Grotesk', sans-serif;
  --bidoft-home-font-body: 'Manrope', sans-serif;
  --bidoft-home-font-script: 'Caveat', cursive;
  --bidoft-home-container: 1200px;
  font-family: var(--bidoft-home-font-body);
  overflow-x: hidden;
}
.bidoft-home *, .bidoft-home *::before, .bidoft-home *::after { box-sizing: border-box; }

.bidoft-home .bidoft-container {
  /* Flat 20px horizontal padding at every width, matching
     .bidoft-header__inner exactly (same --container max-width, same 20px
     left/right padding at all breakpoints — the header only steps its
     VERTICAL padding responsively, never horizontal). This makes the
     expertise section's cards — which already fill 100% of this
     container via `grid-template-columns: repeat(5, 1fr)` — span the
     identical left/right boundary as the logo/nav/CTA above, with no
     separate change needed to the cards themselves. */
  max-width: var(--bidoft-home-container);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* ---------- Hero ----------
   The hero photo IS the hero background: a full-bleed <img> (natural
   width:100%/height:auto, so its 1672x941 aspect ratio is never cropped
   or stretched) drives the section's height, and the text content is
   layered on top of its own light/pale left half via position:absolute
   at desktop widths. Below 1024px there isn't room for an overlay to
   stay legible, so content and image fall back to a normal stacked
   column (text, then image, then badges). */
.bidoft-home-hero {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
}

/* Constrains the hero to the exact same max-width/inset as the header
   (--bidoft-container: 1200px, 20px horizontal padding) instead of a
   full-bleed image, per explicit instruction. */
.bidoft-home-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

.bidoft-home-hero__bg {
  position: relative;
  width: 100%;
  line-height: 0;
}
.bidoft-home-hero__device {
  display: block;
  width: 100%;
  height: auto;
}
.bidoft-home-hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  display: block;
}

.bidoft-home-hero__content {
  position: relative;
  z-index: 4;
  max-width: 620px;
  padding: 32px 20px 24px;
}
@media (min-width: 600px) { .bidoft-home-hero__content { padding: 36px 40px 24px; } }
@media (min-width: 1024px) {
  .bidoft-home-hero__content {
    position: absolute;
    top: 48%;
    left: 20px;
    transform: translateY(-50%);
    width: min(640px, 46vw);
    max-width: none;
    padding: 0;
  }
}

.bidoft-home-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bidoft-home-text);
}
.bidoft-home-eyebrow__line { display: inline-block; width: 32px; height: 1px; background: var(--bidoft-home-text); flex-shrink: 0; }

.bidoft-home-hero__title {
  font-family: var(--bidoft-hero-font) !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.bidoft-home-hero__title-line1 { display: block; color: var(--bidoft-home-ink) !important; }
.bidoft-home-hero__title-line2 { display: block; color: var(--bidoft-hero-accent) !important; }

.bidoft-home-hero__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--bidoft-home-muted);
  max-width: 54ch;
  margin: 0 0 32px;
}
@media (min-width: 768px) { .bidoft-home-hero__desc { font-size: 17px; } }

.bidoft-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

.bidoft-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--bidoft-home-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  padding: 16px 24px;
  padding-right: 10px;
  border-radius: 999px;
  transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
}

/* ---- Primary: default / hover / active ----
   Colors are sampled directly from the client-supplied generated button
   artwork (not approximated from the existing Bidoft palette): default
   run ~#014BAA -> #0168C4 -> #02A5F2, active/pressed ~#022D7B -> #0146B1
   -> #016AE5 (deeper, per the reference). The brightest default/hover
   stop measures only 2.74:1 against white text on its own — the client
   explicitly prioritized matching the reference's vivid color over a
   safer flatter blue, so a subtle text-shadow (their own suggested
   technique) is used to keep the label legible there instead of
   desaturating the fill. */
.bidoft-home-btn--primary {
  background: linear-gradient(90deg, #014BAA 0%, #0168C4 50%, #02A5F2 100%);
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0, 20, 55, 0.55);
  box-shadow: 0 10px 22px -8px rgba(2, 74, 169, 0.6);
}
.bidoft-home-btn--primary:hover {
  box-shadow:
    0 10px 22px -8px rgba(2, 74, 169, 0.6),
    0 0 0 6px rgba(29, 125, 242, 0.22),
    0 0 36px 10px rgba(29, 125, 242, 0.55);
}
.bidoft-home-btn--primary:active {
  transform: translateY(1px);
  background: linear-gradient(90deg, #022D7B 0%, #0146B1 50%, #016AE5 100%);
  box-shadow: inset 0 2px 6px rgba(0, 12, 35, 0.4);
}

.bidoft-home-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  color: #FFFFFF;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.bidoft-home-btn__arrow svg { width: 16px; height: 16px; }
.bidoft-home-btn--primary:active .bidoft-home-btn__arrow { background: rgba(255,255,255,0.14); }

/* ---- Secondary: default / hover / active ----
   Border/text/arrow-icon blue and the pale arrow-circle tint are also
   sampled from the reference artwork; the active/pressed fill is the
   pale-blue tint sampled from the pressed reference image, not plain
   white or the site's existing --bidoft-home-tint. */
.bidoft-home-btn--secondary {
  background: #FFFFFF;
  border: 1.5px solid #0460E5;
  color: #0460E5 !important;
}
.bidoft-home-btn--secondary:hover {
  box-shadow:
    0 0 0 5px rgba(4, 96, 229, 0.12),
    0 0 28px 6px rgba(4, 96, 229, 0.38);
}
.bidoft-home-btn--secondary:active {
  transform: translateY(1px);
  background: #E2F0FC;
  box-shadow: inset 0 2px 5px rgba(4, 96, 229, 0.2);
}
.bidoft-home-btn--secondary .bidoft-home-btn__arrow {
  background: #E3F3FD;
  color: #0460E5;
}

.bidoft-home .bidoft-home-btn:focus-visible { outline: 2px solid #0460E5; outline-offset: 3px; }
.bidoft-home-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 0;
  margin: 0;
  padding: 0;
}
.bidoft-home-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bidoft-home-ink);
  line-height: 1.4;
  padding: 0 20px;
  border-right: 1px solid var(--bidoft-home-border);
}
.bidoft-home-trust li:last-child { border-right: none; }
.bidoft-home-trust li:first-child { padding-left: 0; }
.bidoft-home-trust__icon {
  display: inline-flex;
  color: var(--bidoft-home-text);
  flex-shrink: 0;
}
.bidoft-home-trust__icon svg { width: 22px; height: 22px; }

/* ---------- Hero visual overlay ----------
   Badges/script are positioned as percentages of .bidoft-home-hero__bg
   (the full-bleed image itself), so they track the actual photo content
   at any viewport width, matching where the source composition put the
   devices and the gaps around them. */
.bidoft-home-script {
  font-family: var(--bidoft-home-font-script);
  font-weight: 600;
  color: var(--bidoft-hero-accent-dark);
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.25;
  position: absolute;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}
.bidoft-home-script--top { top: 5%; left: 53%; text-align: left; max-width: 180px; }
.bidoft-home-script--bottom { top: 55%; right: 4%; text-align: right; max-width: 180px; }
@media (max-width: 1023px) { .bidoft-home-script { display: none; } }

.bidoft-home-badges {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.bidoft-home-badge {
  position: absolute;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 9px 18px 9px 9px;
  box-shadow: 0 10px 24px -12px rgba(11, 24, 48, 0.35);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--bidoft-home-ink) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  pointer-events: auto;
  white-space: nowrap;
}
.bidoft-home-badge:hover { transform: translateY(-50%) translateX(-4px); box-shadow: 0 12px 28px -10px rgba(11, 24, 48, 0.4); }
.bidoft-home-badge:nth-child(1) { top: 17%; right: 3%; }
.bidoft-home-badge:nth-child(2) { top: 24.5%; right: 10%; }
.bidoft-home-badge:nth-child(3) { top: 32%; right: 6%; }
.bidoft-home-badge:nth-child(4) { top: 39.5%; right: 2%; }
.bidoft-home-badge:nth-child(5) { top: 46%; right: -0.5%; }
.bidoft-home-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bidoft-home-tint);
  color: var(--bidoft-home-text);
  flex-shrink: 0;
}
.bidoft-home-badge__icon svg { width: 17px; height: 17px; }
.bidoft-home .bidoft-home-badge:focus-visible { outline: 2px solid var(--bidoft-hero-accent-dark); outline-offset: 2px; }

@media (max-width: 1023px) {
  .bidoft-home-hero__bg { margin-top: 28px; }
  .bidoft-home-badges {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px 20px 0;
  }
  .bidoft-home-badge {
    position: static;
    transform: none !important;
    font-size: 12.5px;
    padding: 8px 14px 8px 8px;
  }
  .bidoft-home-badge:hover { transform: none !important; }
  .bidoft-home-badge__icon { width: 26px; height: 26px; }
  .bidoft-home-badge__icon svg { width: 14px; height: 14px; }
}

/* ---------- Expertise section ---------- */
.bidoft-home-expertise { padding: 56px 0 72px; background: var(--bidoft-home-surface); }
@media (min-width: 768px) { .bidoft-home-expertise { padding: 80px 0; } }

.bidoft-home-expertise__header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
}
.bidoft-home-expertise__rule { display: block; width: 40px; height: 3px; background: var(--bidoft-home-blue); border-radius: 2px; margin-bottom: 12px; }
.bidoft-home-expertise__header h2 {
  font-family: var(--bidoft-home-font-heading);
  font-weight: 700;
  font-size: 26px;
  color: var(--bidoft-home-ink) !important;
  margin: 0;
}
@media (min-width: 768px) { .bidoft-home-expertise__header h2 { font-size: 32px; } }
.bidoft-home-expertise__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--bidoft-home-text) !important;
  text-decoration: none;
}
.bidoft-home-expertise__link svg { width: 16px; height: 16px; }
.bidoft-home-expertise__link:hover { color: var(--bidoft-home-blue-dark); }

.bidoft-home-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .bidoft-home-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .bidoft-home-cards { grid-template-columns: repeat(5, 1fr); gap: 20px; } }

.bidoft-home-card {
  display: flex;
  flex-direction: column;
  background: var(--bidoft-home-surface);
  border: 1px solid var(--bidoft-home-border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--bidoft-home-ink) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bidoft-home-card:hover { box-shadow: 0 16px 32px -16px rgba(11,24,48,0.25); border-color: var(--bidoft-home-blue-mid); transform: translateY(-2px); }
.bidoft-home-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.bidoft-home-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bidoft-home-card__body { position: relative; padding: 20px 18px 22px; }
.bidoft-home-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bidoft-home-tint);
  color: var(--bidoft-home-blue-mid);
  margin-top: -38px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  border: 3px solid var(--bidoft-home-surface);
}
.bidoft-home-card__icon svg { width: 19px; height: 19px; }
.bidoft-home-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bidoft-home-text);
  margin: 0 0 4px;
}
.bidoft-home-card__title {
  font-family: var(--bidoft-home-font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--bidoft-home-ink) !important;
  margin: 0 28px 0 0;
  line-height: 1.35;
}
.bidoft-home-card__arrow {
  position: absolute;
  right: 16px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--bidoft-home-border);
  color: var(--bidoft-home-blue-mid);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.bidoft-home-card__arrow svg { width: 15px; height: 15px; }
.bidoft-home-card:hover .bidoft-home-card__arrow { background: var(--bidoft-home-blue-mid); border-color: var(--bidoft-home-blue-mid); color: #FFFFFF; }
.bidoft-home .bidoft-home-card:focus-visible { outline: 2px solid var(--bidoft-home-blue-dark); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bidoft-home-btn, .bidoft-home-card, .bidoft-home-badge, .bidoft-home-card__arrow { transition: none !important; }
}