:root {
  --bg: #f6f8fb;
  --paper: #fff;
  --ink: #102033;
  --muted: #66758a;
  --brand: rgb(81 92 255);
  --brand-2: #225bff;
  --brand-dark: #132846;
  --line: #e4e9f1;
  --soft: #eef4ff;
  --green: #39d98a;
  --radius: 24px;
  --shadow: 0 24px 80px rgba(16, 32, 51, .12);
  --container: 1180px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6
}

a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%;
  height: auto
}

.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto
}

.narrow {
  width: min(900px, calc(100% - 40px))
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  padding: 10px;
  z-index: 99
}

.skip-link:focus {
  left: 10px
}

.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  padding: 20px 0;
  transition: .2s
}

.site-header.scrolled {
  background: rgba(0, 0, 0, 0.692);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(16, 32, 51, .06);
  padding: 10px 0
}

.site-header.scrolled .lang-link {
  color: #fff;
}

.header-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: -.02em
}


.brand-logo {
  width: auto;
  height: 42px;
  display: block;
}

.brand-logo-light {
  display: none;
}

.brand-logo-dark {
  display: block;
}

/* Logo behavior: start page uses the light logo in the unscrolled hero header; all scrolled headers use the same light logo. */
body.page-index .site-header:not(.scrolled) .brand-logo-dark,
.site-header.scrolled .brand-logo-dark {
  display: none;
}

body.page-index .site-header:not(.scrolled) .brand-logo-light,
.site-header.scrolled .brand-logo-light {
  display: block;
}

.site-nav {
  display: flex;
  gap: 6px;
  border-radius: 18px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px)r;
  background-color: hsla(60, 4%, 55%, .5);
  box-shadow: 0 14px 48px rgba(16, 32, 51, .08)
}

.site-nav a {
  padding: .75rem .75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-radius: 12px;
  color: rgb(249 249 249/ 1);
  font-weight: 400;
  font-size: .875rem;
}

.site-nav a:hover,
.site-nav a.active {
    font-weight: 800;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center
}

.lang-link {
  font-weight: 800;
  color: #102033;
  padding: 8px 10px
}

body.page-index .lang-link {
  color: #fff;
}


.nav-toggle {
  display: none;
  border: 0;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(16, 32, 51, .12)
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 4px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  transition: .18s
}

.btn-sm {
  padding: 9px 14px;
  font-size: 14px
}

.btn-lg {
  padding: 15px 22px;
  font-size: 16px
}

.btn-primary {
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 18px 46px rgba(54, 51, 255, 0.36)
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: saturate(1.05)
}

.btn-secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--line)
}

.btn-light {
  background: #fff;
  color: var(--ink)
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 70px;
  background: radial-gradient(circle at 15% 15%, rgba(54, 51, 255, .42), transparent 27%), linear-gradient(135deg, #f6f8fb 0%, #eaf1ff 55%, #fbfcff 100%)
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/static/img/beam-hero-city-image.webp') center/cover no-repeat;
  opacity: .15
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  gap: 50px;
  align-items: center
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
  color: #2954a3;
  margin-bottom: 14px
}

.eyebrow:before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: var(--brand)
}

.eyebrow.light {
  color: #cfe2ff
}

.hero h1,
.page-hero h1 {
  font-size: clamp(42px, 6vw, 78px);
  line-height: .98;
  letter-spacing: -.06em;
  margin: 0 0 22px
}

.hero-lead,
.page-hero p,
.section-lead {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--muted);
  max-width: 780px
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px
}

.trust-row span,
.pill-row span {
  display: inline-flex;
  padding: 8px 12px;
  border: 1px solid rgba(16, 32, 51, .1);
  background: rgba(255, 255, 255, .78);
  border-radius: 999px;
  font-weight: 800;
  color: #324158;
  font-size: 14px
}

.hero-demo-card,
.content-card,
.feature-card,
.use-card,
.license-box,
.contact-form,
.preview-shell {
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--radius);
  box-shadow: var(--shadow)
}

.hero-demo-card {
  padding: 18px;
  flex: 1;
}

.demo-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  margin-bottom: 14px
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 8px rgba(57, 217, 138, .14)
}

.demo-dropzone {
  display: block;
  text-align: center;
  border: 2px dashed #c7d3e5;
  background: linear-gradient(180deg, #f8fbff, #fff);
  padding: 24px;
  border-radius: 20px;
  height: 100%;
  cursor: pointer
}

.demo-dropzone.dragover,
.demo-dropzone:hover {
  border-color: var(--brand-2);
  background: #f2f7ff
}

.drop-icon {
  font-size: 34px;
  color: var(--brand-2)
}

.demo-dropzone h2 {
  font-size: 22px;
  margin: 8px 0
}

.demo-dropzone p {
  color: var(--muted);
  margin: 0 0 16px
}

.hidden {
  display: none !important
}

.small-muted {
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px
}

.notice {
  padding: 12px 14px;
  border-radius: 14px;
  margin-top: 12px;
  font-weight: 700
}

.notice.info {
  background: #eaf4ff;
  color: #164985
}

.notice.error {
  background: #fff0f0;
  color: #a12121
}

.preview-shell {
  padding: 14px;
  background: #f8fafc;
  flex: 1
}

.preview-shell.compact {
  box-shadow: none;
  border-color: var(--line)
}

.preview-image {
  display: block;
  width: 100%;
  max-height: 330px;
  object-fit: contain;
  border-radius: 16px;
  background: #fff
}

.result-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px
}

.result-panel > div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px
}

.result-panel span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800
}

.result-panel strong {
  font-size: 18px
}

.section {
  padding: 86px 0
}

.logo-strip {
  padding: 34px 0;
  background: #fff
}

.logo-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap
}

.logo-strip p {
  font-weight: 900;
  color: var(--muted);
  margin: 0
}

.pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center
}

.section h2 {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.045em;
  margin: 0 0 18px
}

.card-grid {
  display: grid;
  gap: 18px
}

.card-grid.two {
  grid-template-columns: repeat(2, 1fr)
}

.card-grid.three {
  grid-template-columns: repeat(3, 1fr)
}

.card-grid.four {
  grid-template-columns: repeat(4, 1fr)
}

.feature-card,
.use-card,
.content-card {
  padding: 28px
}

.feature-card h3,
.use-card h3 {
  margin: 0 0 10px;
  font-size: 21px
}

.feature-card p,
.use-card p,
.content-card p {
  color: var(--muted);
  margin: 0
}

.section-dark {
  background: linear-gradient(135deg, #102033, #17375f);
  color: #fff
}

.section-dark p {
  color: #c8d6e8
}

.code-card {
  padding: 24px;
  border-radius: 22px;
  background: #07111f;
  color: #d4e4ff;
  overflow: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .2)
}

.code-card.light {
  background: #102033;
  color: #e7f0ff
}

.section-soft {
  background: #eaf1ff
}

.section-head {
  text-align: center;
  margin: 0 auto 36px;
  max-width: 850px
}

.section-head p {
  color: var(--muted);
  font-size: 19px
}

.pricing-panel {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 28px;
  align-items: center
}

.license-box {
  padding: 28px
}

.license-box ul {
  margin: 16px 0 22px;
  padding-left: 20px;
  color: var(--muted)
}

.contact-section {
  background: linear-gradient(180deg, #fff, #f6f8fb)
}

.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 40px
}

.contact-points {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  font-weight: 800
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px
}

.contact-form label {
  display: grid;
  gap: 7px;
  font-weight: 800;
  color: #344156
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 13px;
  /*font: inherit;*/
  background: #fff;
  color: var(--ink)
}

.contact-form .full {
  grid-column: 1/-1
}

.honeypot {
  position: absolute;
  left: -9999px
}

.page-hero {
  padding: 150px 0 70px;
  text-align: center;
  background: radial-gradient(circle at 80% 10%, rgba(54, 51, 255, .35), transparent 25%), linear-gradient(180deg, #edf4ff, #f6f8fb)
}

.demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 30px
}

.demo-layout > .hero-demo-card,
.demo-layout > .preview-shell {
  height: 100%;
  min-height: 100%;
}

.demo-layout > .hero-demo-card {
  display: flex;
  flex-direction: column;
}

.demo-layout > .preview-shell {
  display: flex;
  flex-direction: column;
}

.api-table {
  display: grid;
  gap: 10px
}

.api-table div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc
}

.api-table code {
  font-weight: 900;
  color: #17375f
}

.site-footer {
  background: #102033;
  color: #fff;
  padding: 58px 0
}

.site-footer p,
.site-footer a {
  font-weight: 200;
  color: #b8c7da
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr .6fr .6fr 1fr;
  gap: 28px
}

.site-footer h3 {
  margin: 0 0 14px
}

.site-footer a {
  display: block;
  margin: 8px 0
}

.footer-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 20px;
  border-radius: 20px
}

.brand-footer span {
 font-weight: bold !important;
  color: #fff
}

.sticky-cta {
  display: none
}

@media(max-width:1040px) {
  .site-nav {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 72px;
    display: none;
    flex-direction: column
  }
  .site-nav.open {
    display: flex
  }
  .nav-toggle {
    display: block
  }
  .header-actions .btn {
    display: none
  }
  .hero-grid,
  .split,
  .pricing-panel,
  .contact-grid,
  .demo-layout {
    grid-template-columns: 1fr
  }
  .demo-layout > .hero-demo-card,
  .demo-layout > .preview-shell {
    height: auto;
    min-height: 0;
  }
  .card-grid.four,
  .card-grid.three {
    grid-template-columns: repeat(2, 1fr)
  }
  .hero {
    padding-top: 120px
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr
  }
  .sticky-cta {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60
  }
  .sticky-cta .btn {
    width: 100%
  }
}

@media(max-width:640px) {
  .container {
    width: min(100% - 28px, var(--container))
  }
  .hero h1,
  .page-hero h1 {
    font-size: 42px
  }
  .card-grid.two,
  .card-grid.three,
  .card-grid.four,
  .contact-form {
    grid-template-columns: 1fr
  }
  .api-table div {
    grid-template-columns: 1fr
  }
  .footer-grid {
    grid-template-columns: 1fr
  }
  .result-panel {
    grid-template-columns: 1fr
  }
  .section {
    padding: 62px 0
  }
  .page-hero {
    padding-top: 120px
  }
}

/* Sales and SEO content extensions */

.hero-actions.centered {
  justify-content: center
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1040px;
  margin: 34px auto 0
}

.proof-card {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(246, 249, 255, .96));
  border: 1px solid rgba(34, 91, 255, .16);
  border-radius: 24px;
  padding: 28px 28px 26px;
  box-shadow: 0 18px 46px rgba(20, 43, 84, .08)
}

.proof-card:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #225bff 0%, #7a68ff 100%)
}

.proof-card:after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -48px;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  background: rgba(34, 91, 255, .055)
}

.proof-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(34, 91, 255, .1);
  color: #225bff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em
}

.proof-card h3 {
  position: relative;
  z-index: 1;
  margin: 20px 0 10px;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.025em
}

.proof-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 49ch;
  color: var(--muted);
  line-height: 1.65
}

.check-list {
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px
}

.check-list li {
  position: relative;
  padding-left: 28px;
  color: #4b5a6e
}

.check-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1a9d62;
  font-weight: 900
}

.check-list.light li {
  color: #d3e2f3
}

.check-list.light li:before {
  color: #39d98a
}

.number-list {
  counter-reset: item;
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: grid;
  gap: 12px
}

.number-list li {
  counter-increment: item;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 14px 54px;
  position: relative;
  color: #46556a;
  font-weight: 650
}

.number-list li:before {
  content: counter(item);
  position: absolute;
  left: 15px;
  top: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 900
}

.comparison-card {
  display: grid;
  gap: 14px
}

.comparison-card div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 14px 40px rgba(16, 32, 51, .07)
}

.comparison-card strong {
  display: block;
  font-size: 18px;
  margin-bottom: 5px
}

.comparison-card span {
  color: var(--muted)
}

.rounded-image {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, .16)
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px
}

.faq-grid .content-card h3 {
  margin-top: 0
}

.content-card h3 {
  font-size: 22px;
  margin: 0 0 10px
}

.content-card ul {
  margin-bottom: 22px
}

.content-card .btn {
  margin-top: 4px
}

/* F2A Beam-accurate home hero */

.beam-hero-outer {
  position: relative;
  padding: 28px 28px 0;
  background: #f6f8fb;
  overflow: hidden
}

.beam-hero-shell {
  position: relative;
  min-height: 680px;
  height: clamp(610px, 72vh, 740px);
  border-radius: 32px;
  background-image: url('/static/img/beam-hero-image.webp');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(16, 32, 51, .18)
}

.beam-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px 64px 54px
}

.beam-hero-copy {
  max-width: 590px;
  margin-top: 70px
}

.beam-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px
}

.beam-kicker:before {
  content: "";
  width: 30px;
  height: 3px;
  border-radius: 99px;
  background: var(--brand);
}

.beam-hero-copy h1 {
  margin: 0;
  color: #fff;
  font-size: 3.5rem;
  line-height: 5rem;
  font-weight: 600;
  max-width: 650px
}

.beam-hero-copy p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
 /* max-width: 560px*/
}

.beam-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 42px
}

.beam-hero-actions .btn {
  height: 46px;
  padding: 0 24px;
  border-radius: 14px
}

.beam-hero-bottom {
  margin-top: auto;
  margin-bottom: 5em;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 1.5rem;
  gap: 24px;
  width: 100%
}

.beam-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.beam-hero-pills span {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(10px)
}

.beam-round-link {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #fff;
  color: #102033;
  font-weight: 900;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22)
}

.beam-demo-panel {
  position: absolute;
  right: 54px;
  bottom: 54px;
  width: min(420px, calc(100% - 108px));
  padding: 16px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .24);
  backdrop-filter: blur(18px)
}

.beam-dropzone {
  padding: 18px;
  border-radius: 20px
}

.beam-dropzone h2 {
  font-size: 20px
}

.beam-preview {
  margin-top: 12px;
  max-height: 270px;
  overflow: auto
}

.beam-preview .preview-image {
  max-height: 150px
}

.beam-preview .result-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.beam-hero-frame-line {
  height: 42px;
}

@media(max-width:1180px) {
  .beam-demo-panel {
    right: 34px;
    bottom: 34px;
    width: 380px
  }
  .beam-hero-content {
    padding-inline: 44px
  }
  .beam-hero-copy {
    max-width: 540px
  }
  .beam-hero-copy h1 {
    font-size: clamp(44px, 6vw, 70px)
  }
}

@media(max-width:980px) {
  .beam-hero-outer {
    padding: 0 0 0
  }
  .beam-hero-shell {
    height: auto;
    min-height: 0;
    border-radius: 0;
    background-position: center top
  }
  .beam-hero-content {
    position: relative;
    padding: 120px 28px 28px;
    min-height: 650px
  }
  .beam-hero-copy {
    margin-top: 0;
    max-width: 680px
  }
  .beam-demo-panel {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 40px);
    margin: -18px auto 30px
  }
  .beam-hero-bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 38px
  }
  .beam-round-link {
    display: none
  }
}

@media(max-width:640px) {
  .beam-hero-content {
    padding: 108px 20px 24px;
    min-height: 620px
  }
  .beam-hero-copy h1 {
    font-size: 44px
  }
  .beam-hero-copy p {
    font-size: 17px
  }
  .beam-hero-actions {
    margin-top: 28px
  }
  .beam-hero-actions .btn {
    width: 100%;
    height: 48px
  }
  .beam-demo-panel {
    width: calc(100% - 28px);
    padding: 12px;
    border-radius: 22px
  }
  .beam-hero-pills span {
    font-size: 12px;
    height: 32px
  }
  .beam-preview .result-panel {
    grid-template-columns: 1fr
  }
  .beam-hero-frame-line {
    display: none
  }
}

@media(max-width:420px) {
  .beam-hero-copy h1 {
    font-size: 38px
  }
  .beam-hero-content {
    min-height: 590px
  }
}

/* F2B wider hero container: hero is intentionally wider than normal content */

.beam-hero-shell.container {
  width: min(1480px, calc(100% - 56px));
  max-width: none
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 18, 32, .76) 0%, rgba(8, 18, 32, .54) 38%, rgba(8, 18, 32, .18) 68%, rgba(8, 18, 32, .10) 100%), linear-gradient(0deg, rgba(8, 18, 32, .46) 0%, rgba(8, 18, 32, .05) 46%, rgba(8, 18, 32, .25) 100%);
  z-index: 0;
}

.beam-hero-frame-line.container {
  width: min(1480px, calc(100% - 56px));
  max-width: none
}

@media(max-width:980px) {
  .beam-hero-shell.container {
    width: 100%
  }
  .beam-hero-frame-line.container {
    width: 100%
  }
}

@media(max-width:640px) {
  .beam-hero-shell.container {
    width: 100%
  }
}

/* Index-only Beam header adjustment */

body.page-index .header-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1480px, 100% - 56px) !important;
  padding: 0px 64px;
  gap: 18px;
}

body.page-index .site-header {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 50;
  margin-top: 2rem;
  padding: 20px 0px;
  transition: 0.2s;
}

body.page-index .site-header.scrolled {
  margin-top: 0;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}


@media (max-width: 1040px) {
  body.page-index .header-shell {
    width: min(var(--container), calc(100% - 40px)) !important;
    padding: 0;
  }
  body.page-index .site-header {
    margin-top: 0;
    padding: 16px 0px;
  }
  .proof-grid {
    grid-template-columns: repeat(2, 1fr)
  }
  .faq-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 640px) {
  body.page-index .header-shell {
    width: min(100% - 28px, var(--container)) !important;
    padding: 0;
  }
  body.page-index .site-header {
    padding: 14px 0px;
  }
}
/* Patch: vertically center content inside the demo upload dropzone. */
.demo-dropzone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.demo-dropzone h2,
.demo-dropzone p {
  max-width: 520px;
}

.demo-dropzone .btn,
.demo-dropzone .small-muted,
.demo-dropzone .notice {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
  .demo-dropzone {
    min-height: 280px;
  }
}
/* Legal pages and footer bottom */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: #b8c7da;
  font-size: 14px;
}
.footer-bottom a {
  color: #fff;
  font-weight: 700;
}
.legal-content {
  max-width: 960px;
  margin-inline: auto;
  line-height: 1.8;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.legal-content h2 {
  font-size: 26px;
  margin: 28px 0 10px;
}
.legal-content strong {
  color: #000;
}
.legal-list {
  display: grid;
  gap: 14px;
}
.legal-list div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.legal-list strong {
  color: var(--ink);
}
@media(max-width:640px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .legal-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Downloads page */
.download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.download-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.download-card h3 {
  font-size: 24px;
  line-height: 1.15;
  margin: 12px 0 10px;
}

.download-card p {
  color: var(--muted);
  margin: 0;
}

.download-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #eef4ff;
  color: #17375f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 11px;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media(max-width: 760px) {
  .download-grid {
    grid-template-columns: 1fr;
  }
  .download-actions .btn {
    width: 100%;
  }
}


/* UX polish: centered page hero text, safer mobile headings and modern mobile navigation. */
.page-hero .narrow,
.page-hero .container.narrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-hero p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page-hero h1 {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: normal;
  text-wrap: balance;
}

.nav-toggle {
  width: 46px;
  height: 46px;
  position: relative;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16, 32, 51, .10);
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(16,32,51,.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  width: auto;
  height: 2px;
  margin: 0;
  border-radius: 999px;
  background: #102033;
  transition: transform .22s ease, opacity .18s ease, top .22s ease;
}

.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(8px); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

body.page-index .site-header:not(.scrolled) .nav-toggle {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.16);
}
body.page-index .site-header:not(.scrolled) .nav-toggle span {
  background: #fff;
}

@media(max-width:1040px) {
  .site-nav {
    position: fixed;
    top: 88px;
    left: 18px;
    right: 18px;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.72);
    background: rgba(255,255,255,.96);
    box-shadow: 0 28px 90px rgba(16,32,51,.22);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    z-index: 80;
    transform: translateY(-6px);
    opacity: 0;
    pointer-events: none;
  }
  .site-nav.open {
    display: flex;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav a {
    color: #102033;
    padding: 15px 16px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 800;
    background: transparent;
  }
  .site-nav a:hover,
  .site-nav a.active {
    color: #102033;
    background: #eef4ff;
  }
  .nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }
}

@media(max-width:640px) {
  .page-hero {
    padding: 112px 0 56px;
  }
  .page-hero h1 {
    font-size: clamp(31px, 9.5vw, 40px);
    line-height: 1.06;
    letter-spacing: -.042em;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .page-hero p {
    font-size: 17px;
    line-height: 1.58;
    max-width: 100%;
  }
  .site-nav {
    top: 78px;
    left: 14px;
    right: 14px;
    border-radius: 22px;
  }
}

/* F2 SEO/UX patch: prevent fixed index header from covering the floating demo panel on medium desktop sizes. */
@media (min-width: 981px) {
  body.page-index .beam-hero-shell {
    isolation: isolate;
  }
  body.page-index .beam-hero-content {
    padding-top: clamp(128px, 15vh, 170px);
  }
  body.page-index .beam-demo-panel {
    top: clamp(150px, 18vh, 185px);
    bottom: auto;
    max-height: calc(100% - clamp(215px, 28vh, 255px));
    overflow: auto;
    z-index: 2;
    overscroll-behavior: contain;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  body.page-index .beam-demo-panel {
    top: 165px;
    max-height: calc(100% - 230px);
  }
  body.page-index .beam-hero-copy {
    max-width: 500px;
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  body.page-index .beam-hero-shell {
    height: 760px;
  }
}


/* Contact form spam/privacy protection */
.contact-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 600 !important;
}
.contact-consent input {
  width: auto !important;
  margin-top: 4px;
  flex: 0 0 auto;
}
.contact-consent a {
  color: #225bff;
  text-decoration: underline;
}

/* Demo mode selector */
.demo-mode-control {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px auto 2px;
  text-align: left;
}

.demo-mode-control span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.demo-mode-control select {
  width: 100%;
  border: 1px solid #c7d3e5;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  padding: 12px 14px;
  font-weight: 800;
  outline: none;
}

.demo-mode-control select:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(54, 51, 255, .1);
}

/* Conversion and benchmark sections */
.benchmark-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f7ff 0%, #fbfcff 64%, #fff 100%);
  border-top: 1px solid rgba(34, 91, 255, .08);
  border-bottom: 1px solid rgba(34, 91, 255, .08)
}

.benchmark-section:before {
  content: "";
  position: absolute;
  top: -190px;
  left: 50%;
  width: 760px;
  height: 380px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66, 92, 255, .12), rgba(66, 92, 255, 0) 68%);
  pointer-events: none
}

.benchmark-section .container {
  position: relative;
  z-index: 1
}

.benchmark-head {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto
}

.benchmark-note {
  margin: 24px auto 0;
  max-width: 930px;
  padding: 15px 18px;
  color: #5b6779;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  border-radius: 16px
}

.benchmark-note strong {
  color: #354158
}

.sales-steps .feature-card {
  position: relative;
  padding-top: 58px;
}

.step-number {
  position: absolute;
  top: 18px;
  left: 22px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #225bff;
  color: #fff;
  font-weight: 900;
}

.sales-steps a {
  display: inline-block;
  margin-top: 10px;
  font-weight: 850;
  color: #225bff;
}

.result-panel strong {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .proof-card {
    min-height: 0;
  }
}


/* Parking mode: show one result row per annotation instead of one aggregate value. */
.parking-results {
  grid-column: 1 / -1;
}

.parking-result-rows {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.parking-result-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.parking-result-index {
  display: inline-flex !important;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #225bff;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.parking-result-value {
  min-width: 0;
}

.parking-result-value strong {
  display: block;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.parking-result-value small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.parking-result-confidence {
  white-space: nowrap;
  color: #354158 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.parking-result-empty {
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: #f8fafc;
}

@media (max-width: 520px) {
  .parking-result-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .parking-result-confidence {
    grid-column: 2;
  }
}