:root{
  --belox-primary:#0b0b0c;
  --belox-accent:#fa6318;
  --belox-white:#ffffff;

  --belox-gray-900:#111214;
  --belox-gray-700:#3a3c40;
  --belox-gray-200:#eceef1;

  --belox-font-body:'Garet-Book', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --belox-font-head:'TelegrafUltraBold800','TelegrafRegular_272984568a25d8528fe2de8b20b29011', var(--belox-font-body);

  --belox-radius: 18px;
  --belox-shadow: 0 14px 40px rgba(0,0,0,.14);

  --belox-container-max: 1240px;
}

/* Base */
html{ scroll-behavior:smooth; }
body.belox{
  font-family: var(--belox-font-body);
  color: var(--belox-gray-900);
  background: var(--belox-white);
  line-height: 1.6;
}

.container{ max-width: var(--belox-container-max); }

/* Typography */
h1,h2,h3,h4{
  font-family: var(--belox-font-head);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 .6rem;
}
h1{ font-size: clamp(2.1rem, 2.6vw + 1.2rem, 3.5rem); }
h2{ font-size: clamp(1.7rem, 1.6vw + 1rem, 2.4rem); }
p{ margin: 0 0 1rem; color: var(--belox-gray-700); }

/* Links */
a{ color: inherit; }
a:hover{ color: var(--belox-accent); }

/* Buttons */
.btn-belox{
  border-radius: 999px;
  padding: .85rem 1.25rem;
  font-weight: 700;
  letter-spacing: .01em;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
  will-change: transform;
}
.btn-belox:active{ transform: translateY(1px); }

.btn-belox-primary{
  background: var(--belox-primary);
  color: var(--belox-white);
  box-shadow: 0 10px 24px rgba(11,11,12,.18);
}
.btn-belox-primary:hover{
  background: #000;
  color: var(--belox-white);
  box-shadow: 0 16px 44px rgba(11,11,12,.22);
  transform: translateY(-1px);
}

.btn-belox-outline{
  background: transparent;
  color: var(--belox-primary);
  border-color: rgba(11,11,12,.18);
}
.btn-belox-outline:hover{
  border-color: rgba(11,11,12,.28);
  background: rgba(11,11,12,.04);
  transform: translateY(-1px);
}

/* Header */
.belox-topbar{
  border-bottom: 1px solid rgba(11,11,12,.08);
  padding: .5rem 0;
  font-size: .95rem;
}

.belox-header{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,11,12,.08);
}
.belox-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: .9rem 0;
}
.belox-brand{
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.belox-brand__mark{
  font-family: var(--belox-font-head);
  font-size: 1.25rem;
  letter-spacing: .06em;
}
.belox-header__actions{
  display:flex;
  align-items:center;
  gap:.6rem;
}

/* Improve default Joomla menu module a bit */
.belox-nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:.25rem;
  align-items:center;
}
.belox-nav a{
  text-decoration:none;
  display:inline-block;
  padding: .55rem .85rem;
  border-radius: 999px;
  color: var(--belox-gray-900);
}
.belox-nav a:hover{
  background: rgba(11,11,12,.05);
  color: var(--belox-gray-900);
}
.belox-nav .active > a,
.belox-nav a.active{
  background: rgba(250,99,24,.12);
  color: var(--belox-gray-900);
}

/* Hero + sections */
.belox-hero{
  padding: clamp(2.5rem, 3vw + 1rem, 4.75rem) 0;
  background:
    radial-gradient(1200px 420px at 20% 20%, rgba(250,99,24,.15), transparent 60%),
    radial-gradient(1200px 420px at 80% 10%, rgba(11,11,12,.06), transparent 55%);
}
.belox-section{
  padding: clamp(2.25rem, 2vw + 1.25rem, 4.25rem) 0;
}
.belox-main{
  padding: 1.25rem 0 2.25rem;
}

/* Cards */
.belox-card{
  border: 1px solid rgba(11,11,12,.08);
  border-radius: var(--belox-radius);
  box-shadow: var(--belox-shadow);
  overflow:hidden;
  background: #fff;
}
.belox-card--soft{
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.belox-card__pad{ padding: 1.25rem; }

/* Footer */
.belox-footer{
  padding: 3rem 0 2rem;
  background: var(--belox-primary);
  color: var(--belox-white);
}
.belox-footer p,
.belox-footer a{ color: rgba(255,255,255,.85); }
.belox-footer a:hover{ color: var(--belox-white); }
.belox-footer__bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: .95rem;
  opacity: .92;
}

/* Offcanvas */
.offcanvas .nav,
.offcanvas ul{ list-style:none; padding-left:0; }
.offcanvas a{
  text-decoration:none;
}
.offcanvas .menu a{
  display:block;
  padding: .8rem 1rem;
  border-radius: 14px;
}
.offcanvas .menu a:hover{
  background: rgba(11,11,12,.06);
}
.offcanvas .menu .active > a,
.offcanvas .menu a.active{
  background: rgba(250,99,24,.14);
}

/* Mobile tweaks */
@media (max-width: 575.98px){
  .belox-header__inner{ padding: .75rem 0; }
  .btn-belox{ padding: .75rem 1.05rem; }
  .belox-brand__mark{ font-size: 1.15rem; }
}