/* Official HERLEIN branding for HerleinContable */

:root {
  --navy: #123d8d !important;
  --blue: #1e63e9 !important;
  --cyan: #43a0ff !important;
  --ink: #f7fbff !important;
  --muted: #bdd0ec !important;
  --soft: rgba(8, 35, 84, 0.48) !important;
  --line: rgba(196, 222, 255, 0.26) !important;
  --surface: rgba(9, 38, 92, 0.68) !important;
  --surface-strong: rgba(7, 32, 78, 0.94) !important;
}

html {
  background: #123d8d !important;
}

body {
  color: #f7fbff !important;
  font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(91, 145, 238, 0.22), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(79, 105, 229, 0.14), transparent 30%),
    linear-gradient(180deg, #071b3f 0%, #09295f 32%, #103a82 68%, #123d8d 100%) !important;
  background-attachment: fixed !important;
}

h1,
h2,
h3,
.brand,
.metric strong,
.chart-head strong,
.platform b,
.document-card h3,
.doc-total strong,
.balance-card > strong,
.ledger-head strong,
.folder-visual strong,
.country-grid strong,
.statement,
.final-cta h2,
.access-band blockquote {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
  letter-spacing: .01em !important;
}

header {
  color: #f7fbff !important;
  background: rgba(7, 32, 78, 0.72) !important;
  border-bottom-color: rgba(196, 222, 255, 0.2) !important;
  backdrop-filter: blur(24px) saturate(138%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(138%) !important;
}

header .brand > *,
footer .footer-brand .brand > * {
  display: none !important;
}

header .brand::before,
footer .footer-brand .brand::before {
  content: "";
  display: block;
  background: url('/contable/photos/herlein-web.webp') center / contain no-repeat;
}

header .brand::before {
  width: 170px;
  height: 58px;
  flex: 0 0 170px;
}

footer .footer-brand .brand::before {
  width: 190px;
  height: 92px;
  flex: 0 0 190px;
}

nav,
.lang {
  color: #d3e2f7 !important;
}

nav a:hover {
  color: #ffffff !important;
}

.btn,
.btn.compact,
.document-card button,
.steps b {
  background-image: linear-gradient(135deg, #2f76ff 0%, #3670ee 54%, #4165df 100%) !important;
  background-color: #1e63e9 !important;
  color: #ffffff !important;
  border-color: rgba(220, 235, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 30px rgba(16, 55, 150, 0.34) !important;
}

.btn.ghost,
.btn.outline-light {
  background: rgba(7, 34, 83, 0.56) !important;
  border-color: rgba(214, 232, 255, 0.36) !important;
  box-shadow: none !important;
}

.hero {
  background:
    radial-gradient(800px 440px at 50% 8%, rgba(67, 160, 255, 0.15), transparent 62%),
    linear-gradient(180deg, rgba(4, 20, 47, 0.98) 0%, rgba(5, 31, 73, 0.97) 52%, rgba(8, 45, 98, 0.82) 100%) !important;
}

.hero h1 {
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

.hero p {
  font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.eyebrow,
.section-title > span {
  font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
}

.section-title h2,
.final-cta h2,
.statement,
.access-band blockquote {
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

.section-title p,
.feature-list,
.platform span,
.platform small,
.insight,
.report-grid,
.steps,
.country-grid,
footer,
.btn {
  font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif !important;
}

.eyebrow,
.section-title > span,
.platform-icon,
.mini-icon,
.report-icon,
.flow-line,
.insight svg,
.feature-list svg,
.ledger-head svg,
.folder-visual > svg,
.chain svg {
  color: #8fc9ff !important;
}

.hero p,
.section-title p,
.platform small,
.insight span,
.metric small,
.chart-card small,
.document-card p,
.line,
.invoice-meta,
.invoice-client small,
.balance-card > div span,
.ledger-head small,
.ledger-row span,
.report-grid span,
.folder-visual span,
.country-grid small,
.note,
.final-cta p,
.final-cta small,
.footer-brand p,
.footer-cols a {
  color: #bdd0ec !important;
}

.dashboard-shell,
.platform,
.insight,
.feature-visual,
.document-card,
.invoice,
.balance-card,
.ledger,
.catalog,
.folder-visual,
.two-cards > div,
.report-grid > div,
.country-grid > div,
.steps > div,
.access-band,
.category-cloud span,
.audience-grid span,
.access-models span,
.language-list span,
.chain span {
  border-color: rgba(196, 222, 255, 0.24) !important;
  backdrop-filter: blur(22px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(132%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 52px rgba(5, 26, 69, 0.30) !important;
}

.dashboard-shell,
.document-card,
.invoice,
.balance-card,
.ledger,
.catalog,
.folder-visual {
  background: rgba(9, 38, 92, 0.68) !important;
}

.metric,
.chart-card,
.insight,
.steps > div,
.category-cloud span,
.audience-grid span,
.access-models span,
.language-list span,
.chain span {
  background: rgba(8, 35, 84, 0.48) !important;
}

.platform,
.two-cards > div,
.report-grid > div,
.country-grid > div,
.access-band {
  background: rgba(9, 38, 92, 0.58) !important;
}

.platform.highlighted {
  background: rgba(37, 82, 166, 0.48) !important;
  border-color: rgba(196, 222, 255, 0.28) !important;
}

.platform-icon,
.mini-icon,
.report-icon,
.pill,
.roles,
.folder-visual div {
  background: rgba(67, 160, 255, 0.14) !important;
  border-color: rgba(196, 222, 255, 0.24) !important;
}

.section.soft {
  background: rgba(8, 35, 84, 0.48) !important;
  border-top-color: rgba(196, 222, 255, 0.12) !important;
  border-bottom-color: rgba(196, 222, 255, 0.12) !important;
}

.feature-visual {
  background: rgba(8, 35, 84, 0.48) !important;
}

.fiscal,
.final-cta {
  background:
    radial-gradient(600px 300px at 90% 10%, rgba(67, 160, 255, 0.24), transparent 60%),
    linear-gradient(135deg, rgba(12, 49, 113, 0.94), rgba(9, 38, 92, 0.96)) !important;
  border-color: rgba(214, 232, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 24px 60px rgba(5, 26, 69, 0.34) !important;
}

.btn.light {
  background: #ffffff !important;
  color: #123d8d !important;
  border-color: #ffffff !important;
}

footer {
  background: rgba(7, 32, 78, 0.70) !important;
  border-top-color: rgba(196, 222, 255, 0.20) !important;
  backdrop-filter: blur(22px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(132%) !important;
}

@media (max-width: 980px) {
  .hero-copy {
    text-align: center !important;
  }

  .hero h1 {
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {
  body {
    background-attachment: scroll !important;
  }

  header .brand::before {
    width: 170px;
    height: 52px;
    flex-basis: 170px;
  }

  footer .footer-brand .brand::before {
    width: 190px;
    height: 82px;
    flex-basis: 190px;
  }

  .mobile-nav {
    background: rgba(7, 32, 78, 0.94) !important;
    border-color: rgba(196, 222, 255, 0.24) !important;
  }

  .hero {
    padding-top: 10.75rem !important;
    background:
      radial-gradient(620px 340px at 50% 12%, rgba(67, 160, 255, 0.13), transparent 64%),
      linear-gradient(180deg, #04152f 0%, #06234f 56%, #0a3473 100%) !important;
  }

  .hero h1 {
    margin-top: 1rem !important;
    font-size: clamp(2.7rem, 12vw, 3.7rem) !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  .hero p {
    margin-top: 1.25rem !important;
    font-size: 1.125rem !important;
    line-height: 1.75 !important;
  }

  .eyebrow {
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  .section-title h2 {
    font-size: clamp(2.45rem, 10.5vw, 3.25rem) !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  .section-title p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
  }

  .btn.large {
    font-size: 1rem !important;
    font-weight: 700 !important;
  }
}