:root{
  --vr-bg:#0b0b0f;
  --vr-gold:#D4AF37;
  --vr-radius:18px;
  --vr-header-h: var(--header-h, 78px);
}

.vr-about-page{ background: var(--vr-bg); color:#fff; }

/* HERO */
.vr-about-hero{
  position:relative;
  min-height: clamp(320px, 52vh, 560px);
  overflow:hidden;
  background: var(--vr-bg);
  margin-top: calc(var(--vr-header-h) * -1);
  padding-top: var(--vr-header-h);
  border-bottom: 1px solid rgba(212,175,55,.18);
}

.vr-about-hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.03);
}

.vr-about-hero__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(212,175,55,.14), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.86), rgba(0,0,0,.42), rgba(0,0,0,.92));
}

.vr-about-hero__inner{
  position:relative;
  z-index:3;
  min-height: clamp(320px, 52vh, 560px);
  display:flex;
  align-items:center;
  padding: 0 22px;
}
@media (max-width: 900px){
  .vr-about-hero__inner{ padding: 0 16px; }
}

.vr-about-hero__content{
  width:min(1100px, calc(100% - 40px));
  padding-top: calc(var(--header-h, 78px) + 30px) !important;
}

.vr-about-crumbs{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  border-radius:999px;
  font-weight:600;
  color: rgba(255,255,255,.75);
  margin-bottom: 14px;
}
.vr-about-crumbs__link{ color: rgba(255,255,255,.75); text-decoration:none; }
.vr-about-crumbs__link:hover{ color: var(--vr-gold); }

.vr-about-hero__title{
  margin: 0 0 12px;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing:.02em;
  text-shadow: 0 12px 50px rgba(0,0,0,.65);
}

.vr-about-hero__sub{
  max-width: 720px;
  color: rgba(255,255,255,.84);
  line-height: 1.55;
}

/* SECTION */
.vr-about-section{ padding: 24px 22px 10px; }
@media (max-width:900px){ .vr-about-section{ padding: 22px 16px 10px; } }

.vr-about-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width:860px){
  .vr-about-grid{ grid-template-columns: 1fr; }
}

.vr-about-card{
  border-radius: var(--vr-radius);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  padding: 16px;
}

.vr-about-card__title{
  margin:0 0 10px;
  font-weight:900;
  letter-spacing:.02em;
}

.vr-about-card p{
  margin: 0 0 10px;
  color: rgba(255,255,255,.84);
  line-height:1.6;
}
.vr-about-card p:last-child{ margin-bottom:0; }

.vr-about-list{
  margin:0;
  padding-left:18px;
  color: rgba(255,255,255,.84);
  line-height:1.6;
}

.vr-about-actions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }

/* WIDE */
.vr-about-section--wide{ padding-bottom: 56px; }

.vr-about-wide{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width:960px){
  .vr-about-wide{ grid-template-columns: 1fr; }
}

.vr-about-wide__title{
  margin:0 0 10px;
  font-weight:900;
  letter-spacing:.02em;
}

.vr-about-cta{
  height:100%;
  border-radius: var(--vr-radius);
  border: 1px solid rgba(212,175,55,.28);
  background:
    radial-gradient(800px 260px at 10% 20%, rgba(212,175,55,.12), transparent 60%),
    rgba(0,0,0,.35);
  padding: 16px;
}

.vr-about-cta__title{ font-weight:900; margin-bottom:6px; }
.vr-about-cta__text{ color: rgba(255,255,255,.82); line-height:1.5; margin-bottom:12px; }

.vr-about-cta__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.vr-about-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.55);
  color: var(--vr-gold);
  font-weight:900;
  text-decoration:none;
}
.vr-about-btn:hover{ background: rgba(212,175,55,.18); }

.vr-about-btn--ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
}
.vr-about-btn--ghost:hover{
  border-color: rgba(212,175,55,.35);
  color: var(--vr-gold);
}
