:root {
  --vr-ink: #071b45;
  --vr-muted: #6b7e9f;
  --vr-blue: #2b7dff;
  --vr-blue-2: #20aef3;
  --vr-purple: #7258ff;
  --vr-green: #20c78f;
  --vr-red: #ff5a67;
  --vr-orange: #ffad3f;
  --vr-border: #dce7f4;
}

.vr-page {
  overflow-x: hidden;
  background: #fff;
  color: var(--vr-ink);
  font-family: "Poppins", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.vr-page *, .vr-page *::before, .vr-page *::after { box-sizing: border-box; }
.vr-page svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vr-container { width: min(1240px, calc(100% - 72px)); margin-inline: auto; }
.vr-section { position: relative; padding: 92px 0; }

.vr-kicker {
  display: inline-block;
  color: #3979ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.vr-kicker-light { color: #58d8ff; }
.vr-section-head { max-width: 860px; margin: 0 auto 44px; text-align: center; }
.vr-section-head h2 {
  margin: 10px 0 14px;
  color: var(--vr-ink);
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.vr-section-head p { max-width: 760px; margin: 0 auto; color: var(--vr-muted); font-size: 16px; line-height: 1.7; }

/* HERO */
.vr-hero {
  position: relative;
  min-height: 670px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 28%, rgba(42,119,255,.22), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(25,187,243,.08), transparent 31%),
    linear-gradient(116deg,#03142f 0%,#072852 58%,#061c3e 100%);
}
.vr-hero-mesh {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .52;
  background:
    linear-gradient(154deg, transparent 0 61%, rgba(72,147,255,.08) 61.1% 61.3%, transparent 61.4%),
    linear-gradient(169deg, transparent 0 74%, rgba(72,147,255,.06) 74.1% 74.3%, transparent 74.4%),
    radial-gradient(circle at 76% 43%, transparent 0 190px, rgba(91,159,255,.10) 191px 192px, transparent 193px),
    radial-gradient(circle at 76% 43%, transparent 0 300px, rgba(91,159,255,.07) 301px 302px, transparent 303px);
}
.vr-glow { position: absolute; z-index: -2; border-radius: 999px; filter: blur(85px); pointer-events: none; }
.vr-glow-one { width: 360px; height: 280px; right: 18%; top: 120px; background: rgba(48,116,255,.18); }
.vr-glow-two { width: 320px; height: 250px; right: 2%; bottom: -100px; background: rgba(114,88,255,.14); }

.vr-hero-grid {
  display: grid;
  grid-template-columns: minmax(445px,.86fr) minmax(575px,1.14fr);
  gap: clamp(48px,4.7vw,82px);
  align-items: center;
  padding: 82px 0 78px;
}
.vr-hero-copy { width: 100%; max-width: 620px; padding-left: 4px; }
.vr-kicker-row { display:flex; align-items:center; gap:11px; }
.vr-kicker-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:#22c99a; box-shadow:0 0 0 8px rgba(34,201,154,.11); }
.vr-kicker-line { width:58px; height:1px; margin-left:8px; background:linear-gradient(90deg,#31caf6,transparent); }
.vr-hero-copy h1 {
  max-width: 620px;
  margin: 22px 0 22px;
  color: #fff;
  font-size: clamp(56px,4.4vw,74px);
  line-height: .98;
  letter-spacing: -.055em;
}
.vr-hero-copy h1 span {
  display:block;
  margin-top:7px;
  white-space:nowrap;
  color:transparent;
  background:linear-gradient(92deg,#28d3f6 0%,#2b82ff 48%,#7458ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.vr-hero-copy > p { max-width: 590px; margin: 0 0 31px; color:#d1dded; font-size:17px; line-height:1.72; }
.vr-hero-cta { display:inline-flex; align-items:center; gap:14px; }
.vr-hero-proof { display:flex; flex-wrap:wrap; gap:22px; margin-top:27px; color:#bfd0e7; font-size:13px; font-weight:650; }
.vr-hero-proof span { display:inline-flex; align-items:center; gap:8px; }
.vr-hero-proof i { width:25px; height:25px; display:grid; place-items:center; border:1px solid rgba(82,196,255,.38); border-radius:50%; color:#5cd5ff; }
.vr-hero-proof svg { width:14px; height:14px; }

.vr-hero-visual { position:relative; min-height:500px; }
.vr-hero-app {
  position:absolute;
  width:min(690px,100%);
  height:420px;
  right:0;
  top:40px;
  overflow:hidden;
  border:1px solid rgba(123,188,255,.46);
  border-radius:24px;
  background:#f8fbff;
  box-shadow:0 30px 75px rgba(0,10,35,.34);
}
.vr-hero-app-top { height:58px; display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:12px; align-items:center; padding:0 16px; color:#fff; background:#082755; }
.vr-hero-app-top > strong { font-size:15px; letter-spacing:.11em; }
.vr-hero-search { height:34px; display:flex; align-items:center; gap:8px; padding-inline:11px; border:1px solid rgba(140,191,247,.18); border-radius:9px; color:#9ebadd; background:#123767; font-size:9px; white-space:nowrap; overflow:hidden; }
.vr-hero-search svg { width:14px; height:14px; }
.vr-live-pill { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border-radius:999px; color:#17a878; background:#eaf9f4; font-size:8px; font-weight:800; }
.vr-live-pill i { width:6px; height:6px; border-radius:50%; background:#20c78f; }
.vr-hero-app-body { height:calc(100% - 58px); display:grid; grid-template-columns:108px minmax(0,1fr); }
.vr-hero-side { display:flex; flex-direction:column; gap:7px; padding:18px 10px; color:#a7bedb; background:#0a2e60; }
.vr-hero-side span { min-height:34px; display:flex; align-items:center; gap:8px; padding-inline:10px; border-radius:9px; font-size:8px; font-weight:650; }
.vr-hero-side span i { width:6px; height:6px; border-radius:50%; background:#7697bc; }
.vr-hero-side span.active { color:#fff; background:linear-gradient(90deg,#1677ed,#2c91ff); }
.vr-hero-side span.active i { background:#fff; }
.vr-hero-canvas { min-width:0; padding:19px 18px; color:var(--vr-ink); background:radial-gradient(circle at 100% 0,rgba(52,132,255,.06),transparent 28%),#f8fbff; }
.vr-hero-canvas-head { display:flex; align-items:center; justify-content:space-between; }
.vr-hero-canvas-head small { display:block; color:#8294ad; font-size:7px; }
.vr-hero-canvas-head h3 { margin:2px 0 0; font-size:18px; }
.vr-hero-canvas-head > span { padding:6px 9px; border:1px solid #d7e4f3; border-radius:9px; color:#6680a0; background:#fff; font-size:7px; }
.vr-hero-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.vr-hero-kpis article { padding:10px 11px; border:1px solid #dce7f4; border-radius:12px; background:#fff; }
.vr-hero-kpis small,.vr-hero-kpis strong,.vr-hero-kpis em { display:block; }
.vr-hero-kpis small { color:#8293aa; font-size:6.5px; }
.vr-hero-kpis strong { margin:2px 0; font-size:16px; }
.vr-hero-kpis em { color:#18a879; font-size:6px; font-style:normal; }
.vr-hero-chart-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(150px,.6fr); gap:8px; margin-top:8px; }
.vr-hero-trend-card,.vr-hero-donut-card { height:200px; padding:13px; border:1px solid #dce7f4; border-radius:13px; background:#fff; }
.vr-mini-title { display:flex; justify-content:space-between; align-items:center; }
.vr-mini-title strong { font-size:9px; }
.vr-mini-title span { color:#2b7dff; font-size:7px; font-weight:800; }
.vr-hero-bars { height:122px; display:flex; align-items:end; gap:8px; margin:16px 5px 0; padding:0 4px 7px; border-bottom:1px solid #dfe7f1; background:repeating-linear-gradient(180deg,transparent 0 29px,#eef3f8 29px 30px); }
.vr-hero-bars i { flex:1; min-width:6px; height:var(--h); border-radius:4px 4px 0 0; background:linear-gradient(180deg,#27b5f5,#3478ff); }
.vr-hero-months { display:flex; justify-content:space-between; padding:5px 4px 0; color:#93a4b9; font-size:5.5px; }
.vr-hero-donut { width:96px; height:96px; display:grid; place-items:center; margin:18px auto 12px; border-radius:50%; background:conic-gradient(#347cff 0 70%,#7358ff 70% 84%,#dfe7f3 84% 100%); }
.vr-hero-donut > span { width:60px; height:60px; display:grid; place-items:center; align-content:center; border-radius:50%; background:#fff; font-size:17px; font-weight:850; }
.vr-hero-donut small { display:block; color:#8a9ab1; font-size:6px; font-weight:500; }
.vr-hero-donut-legend { display:grid; grid-template-columns:6px minmax(0,1fr) auto; gap:5px; align-items:center; margin-top:5px; color:#7487a3; font-size:6px; }
.vr-hero-donut-legend i { width:6px; height:6px; border-radius:50%; background:#347cff; }
.vr-hero-donut-legend.alt i { background:#7358ff; }
.vr-hero-donut-legend b { color:var(--vr-ink); font-size:6px; }
.vr-hero-float { position:absolute; z-index:5; min-width:155px; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid rgba(255,255,255,.82); border-radius:16px; background:rgba(255,255,255,.98); box-shadow:0 20px 45px rgba(0,16,48,.20); }
.vr-float-executive { right:18px; top:10px; }
.vr-float-audit { left:-8px; bottom:10px; }
.vr-float-icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:12px; }
.vr-float-icon svg { width:18px; height:18px; }
.vr-float-icon.blue { color:#2b7dff; background:#edf4ff; }
.vr-float-icon.green { color:#18a97b; background:#eaf9f4; }
.vr-hero-float small,.vr-hero-float strong,.vr-hero-float em { display:block; }
.vr-hero-float small { color:#8798ad; font-size:7px; }
.vr-hero-float strong { margin:2px 0; font-size:15px; }
.vr-hero-float em { color:#18a97b; font-size:6px; font-style:normal; }

/* DASHBOARD */
.vr-dashboard-section { background:radial-gradient(circle at 50% 0,rgba(45,126,255,.07),transparent 30%),linear-gradient(180deg,#fff 0%,#f6faff 100%); }
.vr-dashboard-showcase { overflow:hidden; border:1px solid #d9e6f4; border-radius:26px; background:#f8fbff; box-shadow:0 28px 70px rgba(18,58,105,.10); }
.vr-dashboard-toolbar { height:62px; display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:14px; align-items:center; padding:0 20px; color:#fff; background:#082b5f; }
.vr-dashboard-brand { font-size:16px; font-weight:900; letter-spacing:.11em; }
.vr-dashboard-search { height:36px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid rgba(138,188,247,.16); border-radius:10px; color:#9db8da; background:#12396d; font-size:10px; overflow:hidden; white-space:nowrap; }
.vr-dashboard-search svg { width:15px; height:15px; flex:0 0 auto; }
.vr-dashboard-range { color:#afc6e1; font-size:9px; }
.vr-dashboard-shell { display:grid; grid-template-columns:142px minmax(0,1fr); min-height:520px; }
.vr-dashboard-sidebar { padding:18px 12px; color:#aec4df; background:#082b5f; }
.vr-side-label { display:block; padding:0 10px 9px; color:#729cd1; font-size:7px; font-weight:800; letter-spacing:.15em; }
.vr-dashboard-sidebar a { min-height:40px; display:flex; align-items:center; gap:9px; margin-bottom:4px; padding:0 10px; border-radius:10px; color:inherit; font-size:9px; font-weight:650; text-decoration:none; }
.vr-dashboard-sidebar a svg { width:14px; height:14px; }
.vr-dashboard-sidebar a.active { color:#fff; background:linear-gradient(90deg,#1778ec,#2c95ff); }
.vr-dashboard-content { min-width:0; padding:22px; background:radial-gradient(circle at 100% 0,rgba(54,133,255,.06),transparent 25%),#f8fbff; }
.vr-dashboard-titlebar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.vr-dashboard-titlebar > div > span { color:#7b8fa9; font-size:8px; font-weight:700; }
.vr-dashboard-titlebar h3 { margin:2px 0 0; font-size:22px; letter-spacing:-.025em; }
.vr-dashboard-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.vr-dashboard-stats article { min-width:0; display:grid; grid-template-columns:37px minmax(0,1fr); gap:9px; align-items:center; padding:12px; border:1px solid #dbe6f3; border-radius:13px; background:#fff; }
.vr-dash-icon { width:37px; height:37px; display:grid; place-items:center; border-radius:10px; }
.vr-dash-icon svg { width:16px; height:16px; }
.vr-dash-icon.blue { color:#2c7dff; background:#edf4ff; }
.vr-dash-icon.purple { color:#7458ff; background:#f1edff; }
.vr-dash-icon.green { color:#17ad7e; background:#eaf9f4; }
.vr-dash-icon.red { color:#ff5965; background:#fff0f1; }
.vr-dashboard-stats small,.vr-dashboard-stats strong,.vr-dashboard-stats em { display:block; }
.vr-dashboard-stats small { color:#8193ac; font-size:7px; }
.vr-dashboard-stats strong { margin:2px 0; font-size:17px; line-height:1; }
.vr-dashboard-stats em { color:#18ad7e; font-size:6.5px; font-style:normal; }
.vr-dashboard-stats article:last-child em { color:#ff5965; }
.vr-dashboard-main-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(230px,.55fr); gap:10px; margin-top:10px; }
.vr-dashboard-trend,.vr-dashboard-risk { min-height:250px; padding:16px; border:1px solid #dbe6f3; border-radius:15px; background:#fff; }
.vr-panel-head { display:flex; justify-content:space-between; align-items:flex-start; }
.vr-panel-head strong { display:block; font-size:10px; }
.vr-panel-head small { display:block; margin-top:2px; color:#8a9ab1; font-size:7px; }
.vr-panel-head > span { color:#2b79ff; font-size:8px; font-weight:800; }
.vr-trend-chart { position:relative; height:190px; margin-top:17px; }
.vr-trend-grid { position:absolute; inset:0 0 24px; background:repeating-linear-gradient(180deg,transparent 0 36px,#edf2f7 36px 37px); }
.vr-trend-chart svg { position:absolute; left:0; right:0; bottom:24px; width:100%; height:150px; overflow:visible; }
.vr-trend-area { fill:url(#trendFill); stroke:none; }
.vr-trend-line { fill:none; stroke:#2b82ff; stroke-width:2.8; }
.vr-trend-chart circle { fill:#fff; stroke:#2b82ff; stroke-width:2.5; }
.vr-trend-bars { position:absolute; inset:38px 8px 25px; display:flex; align-items:end; gap:18px; opacity:.21; }
.vr-trend-bars span { flex:1; height:var(--h); border-radius:4px 4px 0 0; background:#2b82ff; }
.vr-trend-labels { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; color:#91a2b7; font-size:6px; }
.vr-donut-wrap { display:grid; grid-template-columns:108px minmax(0,1fr); gap:12px; align-items:center; margin-top:36px; }
.vr-donut { width:108px; height:108px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#347cff 0 68%,#20c78f 68% 82%,#ffbd4a 82% 93%,#ff5965 93% 100%); }
.vr-donut > span { width:66px; height:66px; display:grid; place-items:center; align-content:center; border-radius:50%; color:var(--vr-ink); background:#fff; font-size:18px; font-weight:850; }
.vr-donut > span small { display:block; color:#8b9db4; font-size:7px; font-weight:500; }
.vr-donut-wrap ul { list-style:none; padding:0; margin:0; }
.vr-donut-wrap li { display:grid; grid-template-columns:7px minmax(0,1fr) auto; gap:6px; align-items:center; margin:8px 0; color:#72849f; font-size:7px; }
.vr-donut-wrap li i { width:7px; height:7px; border-radius:50%; }
.c-red { background:#ff5965; } .c-orange { background:#ffbd4a; } .c-green { background:#20c78f; }
.vr-donut-wrap li b { color:var(--vr-ink); font-size:7px; }
.vr-dashboard-bottom { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:10px; }
.vr-dashboard-bottom article { padding:12px 14px; border:1px solid #dbe6f3; border-radius:12px; background:#fff; }
.vr-dashboard-bottom span,.vr-dashboard-bottom strong,.vr-dashboard-bottom small { display:block; }
.vr-dashboard-bottom span { color:#8394aa; font-size:7px; }
.vr-dashboard-bottom strong { margin:2px 0; font-size:15px; }
.vr-dashboard-bottom small { color:#19aa7b; font-size:6.5px; }

.vr-visibility-matrix { display:grid; grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr); gap:22px; align-items:center; margin-top:22px; padding:24px; border:1px solid #dce7f4; border-radius:22px; background:#fff; box-shadow:0 18px 45px rgba(18,58,105,.06); }
.vr-visibility-intro h3 { margin:8px 0; font-size:22px; letter-spacing:-.025em; }
.vr-visibility-intro p { margin:0; color:var(--vr-muted); font-size:12px; line-height:1.6; }
.vr-visibility-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.vr-visibility-tiles > div { min-height:58px; display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #e0e9f3; border-radius:12px; background:#fbfdff; }
.vr-visibility-tiles i { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:10px; color:#2b7dff; background:#edf4ff; }
.vr-visibility-tiles svg { width:16px; height:16px; }
.vr-visibility-tiles span { color:#17345d; font-size:10px; font-weight:700; }

/* CAPABILITIES */
.vr-capabilities { background:linear-gradient(180deg,#f6faff 0%,#fff 15%,#fff 100%); }
.vr-capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.vr-capability-card { min-height:305px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(230px,.8fr); gap:22px; align-items:center; padding:26px; border:1px solid #dce7f4; border-radius:22px; background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:0 16px 42px rgba(21,64,115,.06); }
.vr-cap-number { color:#b6c5d8; font-size:11px; font-weight:800; letter-spacing:.08em; }
.vr-cap-icon { width:45px; height:45px; display:grid; place-items:center; margin:14px 0 17px; border-radius:14px; color:#2b7dff; background:#edf4ff; }
.vr-cap-icon svg { width:22px; height:22px; }
.vr-cap-copy h3 { margin:0 0 10px; font-size:18px; letter-spacing:-.02em; }
.vr-cap-copy p { margin:0; color:var(--vr-muted); font-size:13px; line-height:1.62; }
.vr-cap-visual { height:210px; overflow:hidden; padding:16px; border:1px solid #dbe6f3; border-radius:17px; background:radial-gradient(circle at 100% 0,rgba(66,137,255,.08),transparent 30%),#f8fbff; }

.vr-cap-dashboard-detailed { position:relative; }
.vr-cap-dash-head { display:flex; justify-content:space-between; align-items:center; }
.vr-cap-dash-head span { color:#506987; font-size:8px; font-weight:800; }
.vr-cap-dash-head b { color:#18a97b; font-size:8px; }
.vr-cap-dash-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:10px; }
.vr-cap-dash-kpis i { min-height:42px; padding:7px 8px; border:1px solid #dce7f3; border-radius:9px; background:#fff; font-style:normal; }
.vr-cap-dash-kpis small,.vr-cap-dash-kpis strong { display:block; }
.vr-cap-dash-kpis small { color:#899ab0; font-size:5.5px; }
.vr-cap-dash-kpis strong { margin-top:2px; font-size:10px; }
.vr-cap-combo-chart { position:relative; height:103px; margin-top:8px; }
.vr-cap-chart-grid { position:absolute; inset:0 0 18px; background:repeating-linear-gradient(180deg,transparent 0 24px,#eaf0f7 24px 25px); }
.vr-cap-bars { position:absolute; inset:18px 8px 18px; display:flex; align-items:end; gap:8px; opacity:.34; }
.vr-cap-bars span { flex:1; height:var(--h); border-radius:4px 4px 0 0; background:linear-gradient(180deg,#2bb4f6,#3478ff); }
.vr-cap-combo-chart svg { position:absolute; inset:0 0 18px; width:100%; height:84px; overflow:visible; }
.vr-cap-combo-chart svg path { fill:none; stroke:#6a58ff; stroke-width:2.2; }
.vr-cap-combo-chart svg circle { fill:#fff; stroke:#6a58ff; stroke-width:2; }
.vr-cap-chart-foot { display:flex; justify-content:space-between; margin-top:-7px; color:#95a4b8; font-size:5.5px; }

.vr-asset-row { min-height:38px; display:grid; grid-template-columns:minmax(0,1fr) 32px 56px; gap:6px; align-items:center; margin-bottom:8px; padding:0 9px; border:1px solid #dde7f2; border-radius:10px; background:#fff; color:#4f6688; font-size:8px; }
.vr-asset-row b { color:var(--vr-ink); font-size:9px; }
.vr-asset-row i { padding:4px 6px; border-radius:999px; color:#377bff; background:#eef4ff; font-size:6px; font-style:normal; text-align:center; }
.vr-asset-row i.good { color:#17aa7c; background:#eaf9f4; }
.vr-asset-row i.warn { color:#d38a16; background:#fff6e4; }
.vr-person-row { min-height:48px; display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:9px; align-items:center; margin-bottom:9px; padding:8px; border:1px solid #dde7f2; border-radius:11px; background:#fff; }
.vr-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#2b7dff; background:#edf4ff; font-size:8px; font-weight:800; }
.vr-person-row b,.vr-person-row small { display:block; }
.vr-person-row b { font-size:8px; }
.vr-person-row small { color:#8193aa; font-size:6.5px; }
.vr-person-row em { color:#557195; font-size:6.5px; font-style:normal; }
.vr-report-chip { min-height:38px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:8px; align-items:center; margin-bottom:8px; padding:0 9px; border:1px solid #dde7f2; border-radius:10px; background:#fff; }
.vr-report-chip span { color:#2b7dff; font-size:10px; font-weight:900; }
.vr-report-chip i { color:#6e829e; font-size:7px; font-style:normal; }
.vr-report-chip b { padding:4px 6px; border-radius:999px; color:#18a979; background:#eaf9f4; font-size:6px; }
.vr-report-chip.custom span { color:#7458ff; }

/* REPORTS */
.vr-reports-section { overflow:hidden; isolation:isolate; background:radial-gradient(circle at 80% 40%,rgba(66,127,255,.18),transparent 32%),linear-gradient(118deg,#03162f 0%,#082d5c 55%,#0d3774 100%); }
.vr-report-orb { position:absolute; z-index:-1; width:560px; height:560px; right:-220px; top:-230px; border:1px solid rgba(104,166,255,.14); border-radius:50%; box-shadow:0 0 0 70px rgba(78,132,255,.02),0 0 0 145px rgba(78,132,255,.015); }
.vr-reports-head h2 { color:#fff; }
.vr-reports-head p { color:#c9d8ec; }
.vr-report-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.vr-report-card { position:relative; min-height:500px; display:flex; flex-direction:column; padding:27px; border-radius:22px; }
.vr-report-card-light { color:var(--vr-ink); border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.97); box-shadow:0 22px 52px rgba(0,13,43,.17); }
.vr-report-card-featured { color:#fff; border:1px solid rgba(111,187,255,.55); background:radial-gradient(circle at 100% 0,rgba(85,111,255,.28),transparent 30%),linear-gradient(145deg,#0a3e7b,#124f9c); box-shadow:0 24px 58px rgba(0,12,39,.28); transform:translateY(-10px); }
.vr-report-code { width:54px; height:54px; display:grid; place-items:center; margin-bottom:18px; border-radius:16px; color:#2b7dff; background:#edf4ff; font-size:14px; font-weight:900; letter-spacing:.05em; }
.vr-report-card-featured .vr-report-code { color:#fff; background:rgba(255,255,255,.13); }
.vr-report-label { color:#377eff; font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.vr-report-card-featured .vr-report-label { color:#77d8ff; }
.vr-report-card h3 { margin:8px 0 11px; font-size:21px; line-height:1.2; letter-spacing:-.025em; }
.vr-report-card p { margin:0; color:var(--vr-muted); font-size:12px; line-height:1.65; }
.vr-report-card-featured p { color:#c9daf0; }
.vr-report-preview { min-height:145px; margin:23px 0 20px; padding:14px; border:1px solid #dce7f3; border-radius:15px; background:#f8fbff; }
.vr-report-card-featured .vr-report-preview { border-color:rgba(143,196,255,.22); background:rgba(255,255,255,.08); }
.vr-preview-head { display:flex; justify-content:space-between; margin-bottom:10px; color:#607694; font-size:8px; }
.vr-preview-head b { color:#1aae7d; }
.vr-preview-row { min-height:27px; display:grid; grid-template-columns:7px minmax(0,1fr) auto; gap:7px; align-items:center; border-top:1px solid #e6edf5; color:#687d99; font-size:7px; }
.vr-preview-row i { width:7px; height:7px; border-radius:50%; }
.vr-preview-row i.ok { background:#20c78f; }
.vr-preview-row i.warn { background:#ffb241; }
.vr-preview-row b { color:var(--vr-ink); font-size:7px; }
.vr-preview-exec { display:grid; grid-template-columns:112px minmax(0,1fr); gap:18px; align-items:center; }
.vr-exec-donut { width:105px; height:105px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#30c7f1 0 84%,rgba(255,255,255,.15) 84% 100%); }
.vr-exec-donut span { width:65px; height:65px; display:grid; place-items:center; align-content:center; border-radius:50%; color:#fff; background:#124f9c; font-size:17px; font-weight:850; }
.vr-exec-donut small { display:block; font-size:6px; color:#c9ddf2; }
.vr-exec-bars { display:grid; gap:10px; }
.vr-exec-bars i { position:relative; height:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.14); }
.vr-exec-bars i::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:inherit; background:linear-gradient(90deg,#5f64ff,#2fd1f2); }
.vr-preview-tech { display:grid; gap:8px; }
.vr-tech-line { min-height:27px; display:flex; justify-content:space-between; align-items:center; padding:0 9px; border-radius:8px; color:#647895; background:#fff; font-size:7px; }
.vr-tech-line b { color:#2b7dff; }
.vr-report-for { margin-top:auto; padding-top:16px; border-top:1px solid #e2eaf3; }
.vr-report-card-featured .vr-report-for { border-color:rgba(255,255,255,.14); }
.vr-report-for small,.vr-report-for strong { display:block; }
.vr-report-for small { margin-bottom:4px; color:#93a3b7; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.vr-report-card-featured .vr-report-for small { color:#9ec5ec; }
.vr-report-for strong { font-size:11px; line-height:1.45; }

/* REVEAL */
.vr-reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.vr-reveal.is-visible { opacity:1; transform:none; }

/* RESPONSIVE */
@media (max-width: 1180px) {
  .vr-container { width:min(1080px,calc(100% - 42px)); }
  .vr-hero-grid { grid-template-columns:minmax(390px,.82fr) minmax(520px,1.18fr); gap:38px; }
  .vr-hero-copy h1 { font-size:clamp(52px,5.8vw,68px); }
  .vr-dashboard-shell { grid-template-columns:120px minmax(0,1fr); }
  .vr-visibility-matrix { grid-template-columns:1fr; }
  .vr-capability-card { grid-template-columns:1fr; }
}

@media (max-width: 980px) {
  .vr-section { padding:76px 0; }
  .vr-hero { min-height:auto; }
  .vr-hero-grid { grid-template-columns:1fr; gap:42px; padding:68px 0 76px; }
  .vr-hero-copy { max-width:720px; padding-left:0; }
  .vr-hero-copy h1 span { white-space:normal; }
  .vr-hero-visual { width:min(780px,100%); min-height:455px; margin-inline:auto; }
  .vr-dashboard-sidebar { display:none; }
  .vr-dashboard-shell { grid-template-columns:1fr; }
  .vr-visibility-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vr-capability-grid { grid-template-columns:1fr; max-width:860px; margin-inline:auto; }
  .vr-capability-card { grid-template-columns:minmax(0,1fr) minmax(230px,.8fr); }
  .vr-report-grid { grid-template-columns:1fr; max-width:760px; margin-inline:auto; }
  .vr-report-card-featured { transform:none; }
  .vr-report-card { min-height:auto; }
}

@media (max-width: 760px) {
  .vr-container { width:calc(100% - 30px); }
  .vr-section { padding:64px 0; }
  .vr-section-head h2 { font-size:clamp(31px,9vw,43px); }
  .vr-section-head p { font-size:15px; }
  .vr-hero-grid { padding:58px 0 65px; }
  .vr-hero-copy h1 { font-size:clamp(46px,12.8vw,61px); }
  .vr-hero-copy > p { font-size:16px; }
  .vr-hero-proof { gap:14px; font-size:12px; }

  .vr-hero-app { position:relative; top:auto; right:auto; width:100%; height:auto; min-height:385px; }
  .vr-hero-visual { min-height:auto; padding-bottom:54px; }
  .vr-hero-app-body { grid-template-columns:78px minmax(0,1fr); min-height:330px; }
  .vr-hero-side { padding:12px 7px; }
  .vr-hero-side span { padding-inline:7px; font-size:0; justify-content:center; }
  .vr-hero-side span i { width:8px; height:8px; }
  .vr-hero-kpis { grid-template-columns:1fr 1fr; }
  .vr-hero-kpis article:last-child { display:none; }
  .vr-hero-chart-grid { grid-template-columns:1fr; }
  .vr-hero-donut-card { display:none; }
  .vr-hero-trend-card { height:175px; }
  .vr-hero-bars { height:100px; }
  .vr-float-executive { right:8px; top:-24px; }
  .vr-float-audit { left:10px; bottom:0; }

  .vr-dashboard-toolbar { grid-template-columns:auto minmax(0,1fr); }
  .vr-dashboard-range { display:none; }
  .vr-dashboard-content { padding:16px; }
  .vr-dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vr-dashboard-main-grid { grid-template-columns:1fr; }
  .vr-dashboard-risk { display:none; }
  .vr-dashboard-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vr-visibility-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vr-capability-card { grid-template-columns:1fr; padding:22px; }
  .vr-cap-visual { height:190px; }
}

@media (max-width: 520px) {
  .vr-container { width:calc(100% - 24px); }
  .vr-hero-copy h1 { font-size:43px; }
  .vr-hero-copy > p { font-size:15px; }
  .vr-hero-app-top { grid-template-columns:auto 1fr; }
  .vr-hero-app-top .vr-live-pill { display:none; }
  .vr-hero-kpis { grid-template-columns:1fr; }
  .vr-hero-kpis article:nth-child(2) { display:none; }
  .vr-hero-app-body { grid-template-columns:58px minmax(0,1fr); }
  .vr-hero-canvas { padding:14px 11px; }
  .vr-float-executive { transform:scale(.9); transform-origin:top right; }
  .vr-float-audit { transform:scale(.9); transform-origin:bottom left; }
  .vr-dashboard-toolbar { padding-inline:12px; }
  .vr-dashboard-brand { font-size:13px; }
  .vr-dashboard-search { font-size:8px; }
  .vr-dashboard-titlebar h3 { font-size:19px; }
  .vr-dashboard-stats article { display:grid; }
  .vr-visibility-tiles { grid-template-columns:1fr; }
  .vr-report-card { padding:22px; }
  .vr-preview-exec { grid-template-columns:90px minmax(0,1fr); }
  .vr-exec-donut { width:88px; height:88px; }
  .vr-exec-donut span { width:55px; height:55px; }
}

@media (prefers-reduced-motion: reduce) {
  .vr-reveal { opacity:1; transform:none; transition:none; }
}

/* ==========================================================
   FINAL REFERENCE MATCH — HERO + ONE DASHBOARD
   Matches the supplied screenshots while leaving all other
   page sections and shared site components untouched.
   ========================================================== */

/* ---------- HERO ---------- */
.vr-hero-reference {
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 88% 82%, rgba(91, 62, 255, .34), transparent 28%),
    radial-gradient(circle at 73% 28%, rgba(23, 148, 255, .12), transparent 26%),
    linear-gradient(120deg, #041a3b 0%, #072a58 57%, #09265a 100%);
}

.vr-hero-reference::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .48;
  background:
    linear-gradient(160deg, transparent 0 66%, rgba(56, 147, 255, .08) 66.1% 66.35%, transparent 66.5%),
    radial-gradient(circle at 84% 46%, transparent 0 168px, rgba(72, 146, 255, .12) 169px 170px, transparent 171px),
    radial-gradient(circle at 84% 46%, transparent 0 275px, rgba(72, 146, 255, .08) 276px 277px, transparent 278px);
}

.vr-hero-reference-glow {
  position: absolute;
  width: 500px;
  height: 230px;
  right: -70px;
  bottom: -120px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(87, 60, 255, .26);
  filter: blur(80px);
  pointer-events: none;
}

.vr-hero-reference-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr);
  align-items: center;
  gap: clamp(44px, 5vw, 84px);
  width: min(1180px, calc(100% - 72px));
  padding: 60px 0 62px;
}

.vr-hero-reference-copy {
  min-width: 0;
  max-width: 585px;
  padding-left: 0;
  overflow: visible;
}

.vr-hero-reference-copy .vr-kicker-row {
  margin-bottom: 16px;
}

.vr-hero-reference-copy h1 {
  margin: 0 0 25px;
  max-width: 580px;
  color: #fff;
  font-size: clamp(48px, 4.35vw, 70px);
  line-height: .98;
  letter-spacing: -.055em;
  overflow: visible;
}

.vr-hero-reference-copy h1 span {
  display: block;
  margin-top: 8px;
  color: transparent;
  background: linear-gradient(91deg, #27d0ef 0%, #268bff 45%, #7154ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.vr-hero-reference-copy > p {
  max-width: 575px;
  margin: 0 0 30px;
  color: #d6e2f1;
  font-size: 16px;
  line-height: 1.72;
}

.vr-hero-reference-visual {
  position: relative;
  min-height: 410px;
}

.vr-ref-card {
  position: absolute;
  border: 1px solid rgba(215, 231, 247, .88);
  border-radius: 15px;
  color: var(--vr-ink);
  background: rgba(255, 255, 255, .965);
  box-shadow: 0 18px 46px rgba(0, 13, 43, .20);
}

.vr-ref-card small {
  display: block;
  color: #8294ad;
  font-size: 9px;
  font-weight: 600;
}

.vr-ref-compliance {
  width: 164px;
  height: 145px;
  left: 35px;
  top: 8px;
  padding: 15px 15px 12px;
  text-align: center;
}

.vr-ref-gauge {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 6px auto 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 270deg, #25c89d 0 78%, #dbe7f3 78% 100%);
}

.vr-ref-gauge::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #fff;
}

.vr-ref-gauge span {
  position: relative;
  z-index: 1;
  color: var(--vr-ink);
  font-size: 22px;
  font-weight: 850;
}

.vr-ref-compliance em {
  display: block;
  color: #1eaf80;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.vr-ref-bars {
  width: 140px;
  height: 116px;
  right: 8px;
  top: 28px;
  padding: 13px 14px;
}

.vr-ref-mini-bars {
  height: 70px;
  display: flex;
  align-items: end;
  gap: 7px;
  margin-top: 8px;
  padding: 0 4px 7px;
  border-bottom: 1px solid #dfe7f0;
  background: repeating-linear-gradient(180deg, transparent 0 21px, #edf2f7 21px 22px);
}

.vr-ref-mini-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #32b7f6, #3378ff);
}

.vr-ref-tasks {
  width: 154px;
  height: 88px;
  right: 42px;
  top: 163px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
}

.vr-ref-task-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #ff5363;
  background: #fff0f2;
}

.vr-ref-task-icon svg { width: 20px; height: 20px; }
.vr-ref-tasks strong { display: block; margin-top: 2px; font-size: 22px; line-height: 1; }

.vr-ref-frameworks {
  width: 292px;
  min-height: 156px;
  right: 0;
  bottom: 4px;
  padding: 16px 17px 13px;
}

.vr-ref-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 11px;
}

.vr-ref-card-head strong { font-size: 12px; }
.vr-ref-card-head span { color: #367eff; font-size: 8px; font-weight: 800; }

.vr-ref-framework-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  min-height: 26px;
}

.vr-ref-framework-row > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #587090;
  font-size: 8px;
}

.vr-ref-framework-row > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #40d1e9;
}

.vr-ref-framework-row:nth-child(3) > span i { background: #71dfc4; }
.vr-ref-framework-row:nth-child(4) > span i { background: #765bff; }
.vr-ref-framework-row:nth-child(5) > span i { background: #40cbb8; }

.vr-ref-framework-row b {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f8;
}

.vr-ref-framework-row b u {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  text-decoration: none;
  background: linear-gradient(90deg, #2dc8d2, #6f56ff);
}

.vr-ref-framework-row em {
  color: var(--vr-ink);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

/* ---------- ONE DASHBOARD ---------- */
.vr-dashboard-reference-section {
  padding: 78px 0 82px;
  background:
    radial-gradient(circle at 50% 0, rgba(51, 126, 255, .05), transparent 32%),
    linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.vr-dashboard-reference-section .vr-section-head {
  margin-bottom: 28px;
}

.vr-dashboard-reference-section .vr-section-head h2 {
  font-size: clamp(29px, 3vw, 43px);
}

.vr-reference-dashboard {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  min-height: 530px;
  overflow: hidden;
  border: 1px solid #dbe7f4;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 62px rgba(17, 55, 102, .10);
}

.vr-reference-sidebar {
  padding: 19px 10px;
  color: #a8bfdd;
  background: #082b5c;
}

.vr-reference-logo {
  margin: 0 7px 30px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .1em;
}

.vr-reference-side-label {
  display: block;
  margin: 0 8px 9px;
  color: #7aa6d7;
  font-size: 6px;
  font-weight: 850;
  letter-spacing: .18em;
}

.vr-reference-sidebar a {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 0 9px;
  border-radius: 9px;
  color: inherit;
  font-size: 8px;
  font-weight: 650;
  text-decoration: none;
}

.vr-reference-sidebar a svg { width: 13px; height: 13px; }

.vr-reference-sidebar a.active {
  color: #fff;
  background: linear-gradient(90deg, #1676ed, #2a95ff);
}

.vr-reference-workspace {
  min-width: 0;
  background: #f9fbff;
}

.vr-reference-toolbar {
  height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #e3ebf5;
  background: #fff;
}

.vr-reference-search {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border-radius: 9px;
  color: #8194ad;
  background: #f1f6fc;
  font-size: 8px;
}

.vr-reference-search svg { width: 14px; height: 14px; }

.vr-reference-toolbar button {
  height: 34px;
  padding: 0 11px;
  border: 1px solid #dde7f3;
  border-radius: 9px;
  color: #65809f;
  background: #fff;
  font-size: 8px;
}

.vr-reference-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-rows: 112px 180px 168px;
  gap: 10px;
  padding: 18px;
}

.vr-reference-top-row {
  grid-column: 1 / 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vr-reference-kpi {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 11px;
  align-items: center;
  padding: 15px;
  border: 1px solid #dce7f3;
  border-radius: 14px;
  background: #fff;
}

.vr-reference-kpi-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #2a83ff;
  background: #eaf4ff;
}

.vr-reference-kpi-icon svg { width: 19px; height: 19px; }
.vr-reference-kpi-tasks .vr-reference-kpi-icon { color: #ff4f64; background: #fff0f2; }
.vr-reference-kpi small,
.vr-reference-kpi strong,
.vr-reference-kpi em { display: block; }
.vr-reference-kpi small { color: #8093aa; font-size: 7px; }
.vr-reference-kpi strong { margin: 3px 0 1px; font-size: 21px; line-height: 1; }
.vr-reference-kpi em { color: #18aa7b; font-size: 6.5px; font-style: normal; font-weight: 800; }

.vr-reference-risk-card {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 14px;
  border: 1px solid #dce7f3;
  border-radius: 14px;
  background: #fff;
}

.vr-reference-risk-card h4,
.vr-reference-activity-card h4,
.vr-reference-framework-card h4 {
  margin: 0;
  font-size: 9px;
}

.vr-reference-risk-donut {
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  margin: 19px auto 0;
  border-radius: 50%;
  background: conic-gradient(#2d7fff 0 58%, #7358ff 58% 70%, #25c88f 70% 88%, #e5ebf4 88% 100%);
}

.vr-reference-risk-donut span {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  color: var(--vr-ink);
  background: #fff;
  font-size: 17px;
  font-weight: 850;
}

.vr-reference-risk-donut small {
  display: block;
  color: #8b9cb2;
  font-size: 6px;
  font-weight: 500;
}

.vr-reference-middle-row {
  grid-column: 1;
  grid-row: 2;
}

.vr-reference-trend-card {
  height: 100%;
  padding: 14px 15px;
  border: 1px solid #dce7f3;
  border-radius: 14px;
  background: #fff;
}

.vr-reference-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vr-reference-panel-title strong { font-size: 9px; }
.vr-reference-panel-title span { color: #2b7dff; font-size: 7px; font-weight: 800; }

.vr-reference-line-chart {
  position: relative;
  height: 132px;
  margin-top: 10px;
}

.vr-reference-gridlines {
  position: absolute;
  inset: 0 0 20px;
  background: repeating-linear-gradient(180deg, transparent 0 28px, #eef3f8 28px 29px);
}

.vr-reference-line-chart svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  width: 100%;
  height: 112px;
  overflow: visible;
}

.vr-reference-area { fill: url(#vrRefLineFill); stroke: none; }
.vr-reference-line { fill: none; stroke: #7760ff; stroke-width: 3; }

.vr-reference-months {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  color: #96a6ba;
  font-size: 5px;
}

.vr-reference-bottom-row {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, .55fr);
  gap: 10px;
}

.vr-reference-activity-card,
.vr-reference-framework-card {
  padding: 14px 15px;
  border: 1px solid #dce7f3;
  border-radius: 14px;
  background: #fff;
}

.vr-reference-activity-card > div {
  min-height: 27px;
  display: grid;
  grid-template-columns: 7px minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #edf2f7;
  color: #617894;
  font-size: 7px;
}

.vr-reference-activity-card > div:last-child { border-bottom: 0; }
.vr-reference-activity-card i { width: 7px; height: 7px; border-radius: 50%; }
.vr-reference-activity-card i.blue { background:#357dff; }
.vr-reference-activity-card i.orange { background:#ff9d24; }
.vr-reference-activity-card i.green { background:#24c58f; }
.vr-reference-activity-card i.red { background:#ff5966; }
.vr-reference-activity-card em { color: #9aabc0; font-size: 6px; font-style: normal; }

.vr-reference-framework-card > div {
  min-height: 27px;
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) 25px;
  gap: 7px;
  align-items: center;
}

.vr-reference-framework-card > div > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #57708f;
  font-size: 7px;
}

.vr-reference-framework-card > div > span i { width: 6px; height: 6px; border-radius: 50%; }
.vr-reference-framework-card .c1 { background:#32c9e2; }
.vr-reference-framework-card .c2 { background:#5b8cff; }
.vr-reference-framework-card .c3 { background:#25c58d; }
.vr-reference-framework-card .c4 { background:#ff9b35; }

.vr-reference-framework-card b {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.vr-reference-framework-card b u {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg,#25c4c9,#367cff);
  text-decoration: none;
}

.vr-reference-framework-card em {
  color: var(--vr-ink);
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
}

.vr-reference-visibility-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  max-width: 940px;
  margin: 38px auto 0;
}

.vr-reference-visibility-icons article {
  text-align: center;
}

.vr-reference-visibility-icons i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 14px;
  color: #2384ff;
  background: #eaf4ff;
  box-shadow: 0 10px 22px rgba(30, 98, 171, .06);
}

.vr-reference-visibility-icons i.red { color: #ff5363; background: #fff0f2; }
.vr-reference-visibility-icons i.orange { color: #f8a12b; background: #fff5e7; }
.vr-reference-visibility-icons svg { width: 22px; height: 22px; }
.vr-reference-visibility-icons strong {
  display: block;
  color: var(--vr-ink);
  font-size: 12px;
  line-height: 1.4;
}

/* Keep Unified Dashboard mini graph richer, but compact */
.vr-cap-dashboard-detailed {
  background:
    radial-gradient(circle at 100% 0, rgba(49, 129, 255, .08), transparent 38%),
    #f8fbff;
}

.vr-cap-dashboard-detailed .vr-cap-combo-chart {
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1120px) {
  .vr-hero-reference-grid {
    grid-template-columns: minmax(380px, .9fr) minmax(460px, 1.1fr);
    width: min(1060px, calc(100% - 52px));
    gap: 40px;
  }

  .vr-ref-compliance { left: 0; }
  .vr-ref-bars { right: 0; }
  .vr-ref-tasks { right: 20px; }
  .vr-ref-frameworks { right: 0; width: 270px; }
}

@media (max-width: 920px) {
  .vr-hero-reference { min-height: auto; }
  .vr-hero-reference-grid {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 36px));
    gap: 36px;
    padding: 62px 0 66px;
  }
  .vr-hero-reference-copy { max-width: 670px; }
  .vr-hero-reference-copy h1 { max-width: 650px; }
  .vr-hero-reference-visual { width: min(590px, 100%); margin-inline: auto; }

  .vr-reference-dashboard { grid-template-columns: 108px minmax(0,1fr); }
  .vr-reference-sidebar a { font-size: 0; justify-content: center; }
  .vr-reference-sidebar a svg { width: 16px; height: 16px; }
  .vr-reference-content { grid-template-columns: minmax(0,1fr) 190px; }
  .vr-reference-bottom-row { grid-template-columns: 1fr 190px; }
}

@media (max-width: 720px) {
  .vr-hero-reference-grid { width: calc(100% - 28px); }
  .vr-hero-reference-copy h1 { font-size: clamp(44px, 13vw, 59px); }
  .vr-hero-reference-copy > p { font-size: 15px; }
  .vr-hero-reference-visual { min-height: 370px; }
  .vr-ref-compliance { width: 145px; height: 132px; }
  .vr-ref-bars { width: 125px; height: 108px; }
  .vr-ref-tasks { width: 139px; right: 4px; top: 148px; }
  .vr-ref-frameworks { width: 245px; }

  .vr-dashboard-reference-section { padding: 64px 0 68px; }
  .vr-reference-dashboard { grid-template-columns: 64px minmax(0,1fr); }
  .vr-reference-sidebar { padding-inline: 7px; }
  .vr-reference-logo { font-size: 0; margin-bottom: 18px; }
  .vr-reference-logo::after { content: "XZ"; font-size: 14px; letter-spacing: 0; }
  .vr-reference-side-label { display: none; }
  .vr-reference-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 12px;
  }
  .vr-reference-top-row { grid-column: 1; grid-row: 1; }
  .vr-reference-risk-card { display: none; }
  .vr-reference-middle-row { grid-column: 1; grid-row: 2; }
  .vr-reference-bottom-row { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; }
  .vr-reference-framework-card { display: none; }
  .vr-reference-toolbar { padding-inline: 10px; }
  .vr-reference-toolbar button { display: none; }
  .vr-reference-visibility-icons { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px 8px; }
  .vr-reference-visibility-icons strong { font-size: 10px; }
}

@media (max-width: 500px) {
  .vr-hero-reference-grid { width: calc(100% - 24px); }
  .vr-hero-reference-copy h1 { font-size: 42px; }
  .vr-hero-reference-visual { min-height: 340px; }
  .vr-ref-compliance { left: 0; top: 0; transform: scale(.88); transform-origin: top left; }
  .vr-ref-bars { right: 0; top: 10px; transform: scale(.88); transform-origin: top right; }
  .vr-ref-tasks { right: 0; top: 132px; transform: scale(.88); transform-origin: top right; }
  .vr-ref-frameworks { right: 0; bottom: 0; width: 240px; transform: scale(.88); transform-origin: bottom right; }

  .vr-reference-dashboard { grid-template-columns: 52px minmax(0,1fr); }
  .vr-reference-top-row { grid-template-columns: 1fr; }
  .vr-reference-kpi-tasks { display: none; }
  .vr-reference-trend-card { min-height: 170px; }
  .vr-reference-activity-card > div { grid-template-columns: 7px 1fr; }
  .vr-reference-activity-card em { display: none; }
  .vr-reference-visibility-icons { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ==========================================================
   VR3 — FINAL REBUILD: HERO + ONE DASHBOARD
   ========================================================== */

.vr3-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:520px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 88% 82%,rgba(91,63,255,.34),transparent 29%),
    radial-gradient(circle at 74% 21%,rgba(34,138,255,.13),transparent 25%),
    linear-gradient(116deg,#031833 0%,#062650 58%,#08275b 100%);
}
.vr3-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.5;
  background:
    linear-gradient(162deg,transparent 0 72%,rgba(65,145,255,.07) 72.1% 72.35%,transparent 72.45%),
    radial-gradient(circle at 86% 42%,transparent 0 175px,rgba(88,151,255,.12) 176px 177px,transparent 178px),
    radial-gradient(circle at 86% 42%,transparent 0 282px,rgba(88,151,255,.07) 283px 284px,transparent 285px);
}
.vr3-hero-bg{
  position:absolute;
  width:460px;
  height:220px;
  right:-60px;
  bottom:-110px;
  z-index:-2;
  border-radius:50%;
  background:rgba(94,59,255,.28);
  filter:blur(80px);
}
.vr3-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(470px,1.06fr);
  gap:clamp(46px,5vw,82px);
  align-items:center;
  width:min(1180px,calc(100% - 64px));
  padding:56px 0 58px;
}
.vr3-hero-copy{
  min-width:0;
  max-width:565px;
}
.vr3-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:17px;
  color:#5bd9ff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.vr3-eyebrow-dot{
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:#22c997;
  box-shadow:0 0 0 7px rgba(34,201,151,.11);
}
.vr3-hero-copy h1{
  margin:0 0 24px;
  color:#fff;
  font-size:clamp(48px,4.15vw,68px);
  line-height:.98;
  letter-spacing:-.052em;
}
.vr3-hero-copy h1>span{
  display:block;
  margin-top:6px;
  color:transparent;
  background:linear-gradient(90deg,#28d2ee 0%,#248fff 48%,#7457ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.vr3-hero-copy p{
  max-width:550px;
  margin:0 0 28px;
  color:#d0ddec;
  font-size:16px;
  line-height:1.72;
}
.vr3-hero-cta{min-height:52px;padding-inline:23px;gap:12px;}

.vr3-hero-visual{
  min-width:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:150px 90px 158px;
  gap:14px 16px;
  align-items:stretch;
  max-width:570px;
  margin-left:auto;
}
.vr3-hero-top-cards{
  grid-column:1 / -1;
  grid-row:1;
  display:grid;
  grid-template-columns:1fr .88fr;
  gap:16px;
}
.vr3-metric-card,
.vr3-task-card,
.vr3-framework-card{
  border:1px solid rgba(219,231,245,.9);
  border-radius:15px;
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 46px rgba(0,13,43,.19);
}
.vr3-metric-card{padding:14px 16px;color:var(--vr-ink);}
.vr3-card-label{
  color:#8597ad;
  font-size:9px;
  font-weight:650;
  text-align:center;
}
.vr3-compliance-card{text-align:center;}
.vr3-semi-gauge{
  position:relative;
  width:86px;
  height:49px;
  margin:10px auto 2px;
  overflow:hidden;
}
.vr3-semi-gauge-track,
.vr3-semi-gauge-value{
  position:absolute;
  left:0;
  top:0;
  width:86px;
  height:86px;
  border-radius:50%;
}
.vr3-semi-gauge-track{
  border:10px solid #dfe9f4;
}
.vr3-semi-gauge-value{
  border:10px solid transparent;
  border-top-color:#23c99b;
  border-left-color:#23c99b;
  transform:rotate(315deg);
}
.vr3-semi-gauge::after{
  content:"";
  position:absolute;
  left:11px;
  top:11px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:#fff;
}
.vr3-semi-gauge strong{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:1px;
  font-size:23px;
  line-height:1;
}
.vr3-positive{
  color:#1eac7d;
  font-size:8px;
  font-weight:850;
  text-align:center;
}
.vr3-trend-card{padding-inline:15px;}
.vr3-small-chart{
  height:91px;
  display:flex;
  align-items:end;
  gap:8px;
  margin-top:9px;
  padding:0 6px 8px;
  border-bottom:1px solid #e1e8f1;
  background:repeating-linear-gradient(180deg,transparent 0 26px,#eef3f8 26px 27px);
}
.vr3-small-chart span{
  flex:1;
  min-width:6px;
  height:var(--h);
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#2ebaf4,#347cff);
}
.vr3-task-card{
  grid-column:2;
  grid-row:2;
  width:82%;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  color:var(--vr-ink);
}
.vr3-task-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:12px;
  color:#ff5363;
  background:#fff0f2;
}
.vr3-task-icon svg{width:19px;height:19px;}
.vr3-task-card small{display:block;color:#8798ad;font-size:8px;}
.vr3-task-card strong{display:block;margin-top:2px;font-size:21px;line-height:1;}
.vr3-framework-card{
  grid-column:1 / -1;
  grid-row:3;
  width:86%;
  justify-self:end;
  padding:15px 17px 13px;
  color:var(--vr-ink);
}
.vr3-framework-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.vr3-framework-title strong{font-size:12px;}
.vr3-framework-title span{color:#397fff;font-size:8px;font-weight:850;}
.vr3-framework-row{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 30px;
  gap:9px;
  align-items:center;
  min-height:27px;
}
.vr3-framework-row>span{
  display:flex;
  align-items:center;
  gap:6px;
  color:#617693;
  font-size:8px;
}
.vr3-framework-row>span i{width:6px;height:6px;border-radius:50%;}
.vr3-framework-row .cyan{background:#3fd2ea;}
.vr3-framework-row .mint{background:#71dfc4;}
.vr3-framework-row .violet{background:#765bff;}
.vr3-framework-row .teal{background:#3bcbb6;}
.vr3-framework-row b{
  position:relative;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:#eef3f8;
}
.vr3-framework-row b u{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--w);
  border-radius:inherit;
  text-decoration:none;
  background:linear-gradient(90deg,#2ec8d3,#7258ff);
}
.vr3-framework-row em{
  color:var(--vr-ink);
  font-size:7px;
  font-style:normal;
  font-weight:850;
  text-align:right;
}

/* dashboard section */
.vr3-dashboard-section{
  position:relative;
  padding:78px 0 86px;
  background:
    radial-gradient(circle at 50% 0,rgba(50,127,255,.055),transparent 32%),
    linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}
.vr3-section-head{
  max-width:850px;
  margin:0 auto 30px;
  text-align:center;
}
.vr3-section-head>span{
  display:inline-block;
  color:#35aef5;
  font-size:11px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.vr3-section-head h2{
  margin:8px 0 11px;
  color:var(--vr-ink);
  font-size:clamp(30px,3vw,43px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.vr3-section-head p{
  max-width:720px;
  margin:0 auto;
  color:var(--vr-muted);
  font-size:15px;
  line-height:1.65;
}
.vr3-dashboard{
  max-width:1080px;
  min-height:548px;
  display:grid;
  grid-template-columns:145px minmax(0,1fr);
  margin:0 auto;
  overflow:hidden;
  border:1px solid #dbe6f3;
  border-radius:22px;
  background:#fff;
  box-shadow:0 26px 62px rgba(17,55,102,.11);
}
.vr3-dashboard-sidebar{
  padding:18px 11px;
  color:#a8c0de;
  background:#082b5c;
}
.vr3-dashboard-logo{
  margin:0 7px 28px;
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:.1em;
}
.vr3-dashboard-sidebar>small{
  display:block;
  margin:0 8px 8px;
  color:#7fa9d7;
  font-size:6px;
  font-weight:850;
  letter-spacing:.18em;
}
.vr3-dashboard-sidebar a{
  min-height:39px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
  padding:0 9px;
  border-radius:9px;
  color:inherit;
  font-size:8px;
  font-weight:650;
  text-decoration:none;
}
.vr3-dashboard-sidebar a svg{width:13px;height:13px;}
.vr3-dashboard-sidebar a.active{
  color:#fff;
  background:linear-gradient(90deg,#1676ed,#2a95ff);
}
.vr3-dashboard-main{
  min-width:0;
  background:#f9fbff;
}
.vr3-dashboard-toolbar{
  height:58px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:0 16px;
  border-bottom:1px solid #e2eaf4;
  background:#fff;
}
.vr3-search{
  height:34px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 11px;
  border-radius:9px;
  color:#8194ad;
  background:#f1f6fc;
  font-size:8px;
}
.vr3-search svg{width:14px;height:14px;}
.vr3-dashboard-toolbar button{
  height:34px;
  padding:0 11px;
  border:1px solid #dde7f3;
  border-radius:9px;
  color:#65809f;
  background:#fff;
  font-size:8px;
}
.vr3-dashboard-content{
  display:grid;
  grid-template-columns:minmax(0,1fr) 225px;
  grid-template-rows:112px 186px 164px;
  gap:10px;
  padding:18px;
}
.vr3-dashboard-left{
  grid-column:1;
  grid-row:1 / span 2;
  display:grid;
  grid-template-rows:112px 186px;
  gap:10px;
  min-width:0;
}
.vr3-kpi-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.vr3-kpi-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:14px 15px;
  border:1px solid #dce7f3;
  border-radius:14px;
  background:#fff;
}
.vr3-kpi-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
}
.vr3-kpi-icon svg{width:19px;height:19px;}
.vr3-kpi-icon.cyan{color:#21b5d8;background:#eaf9fb;}
.vr3-kpi-icon.red{color:#ff5363;background:#fff0f2;}
.vr3-kpi-card small,.vr3-kpi-card strong,.vr3-kpi-card em{display:block;}
.vr3-kpi-card small{color:#8093aa;font-size:7px;}
.vr3-kpi-card strong{margin:3px 0 1px;font-size:21px;line-height:1;}
.vr3-kpi-card em{color:#18aa7b;font-size:6.5px;font-style:normal;font-weight:850;}
.vr3-compliance-trend,
.vr3-risk-overview,
.vr3-recent-activity,
.vr3-top-frameworks{
  border:1px solid #dce7f3;
  border-radius:14px;
  background:#fff;
}
.vr3-compliance-trend{padding:14px 15px;}
.vr3-panel-title{display:flex;justify-content:space-between;align-items:center;}
.vr3-panel-title strong{font-size:9px;}
.vr3-panel-title span{color:#2b7dff;font-size:7px;font-weight:850;}
.vr3-line-chart{position:relative;height:137px;margin-top:9px;}
.vr3-chart-grid{
  position:absolute;
  inset:0 0 20px;
  background:repeating-linear-gradient(180deg,transparent 0 28px,#eef3f8 28px 29px);
}
.vr3-line-chart svg{
  position:absolute;
  left:0;
  right:0;
  bottom:20px;
  width:100%;
  height:116px;
  overflow:visible;
}
.vr3-trend-fill{fill:url(#vr3TrendFill);stroke:none;}
.vr3-trend-line{fill:none;stroke:#7760ff;stroke-width:3;}
.vr3-months{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  justify-content:space-between;
  color:#96a6ba;
  font-size:5px;
}
.vr3-risk-overview{
  grid-column:2;
  grid-row:1 / span 2;
  padding:14px;
}
.vr3-risk-overview h4,
.vr3-recent-activity h4,
.vr3-top-frameworks h4{margin:0;font-size:9px;}
.vr3-risk-donut{
  width:126px;
  height:126px;
  display:grid;
  place-items:center;
  margin:18px auto 8px;
  border-radius:50%;
  background:conic-gradient(#2d7fff 0 58%,#7358ff 58% 70%,#25c88f 70% 88%,#e5ebf4 88% 100%);
}
.vr3-risk-donut span{
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:50%;
  color:var(--vr-ink);
  background:#fff;
  font-size:17px;
  font-weight:850;
}
.vr3-risk-donut small{display:block;color:#8b9cb2;font-size:6px;font-weight:500;}
.vr3-risk-legend{display:grid;gap:6px;padding:0 18px;}
.vr3-risk-legend span{
  display:grid;
  grid-template-columns:7px 1fr auto;
  gap:6px;
  align-items:center;
  color:#6d809c;
  font-size:7px;
}
.vr3-risk-legend i{width:7px;height:7px;border-radius:50%;}
.vr3-risk-legend .high{background:#ff5966;}
.vr3-risk-legend .medium{background:#ffb33f;}
.vr3-risk-legend .low{background:#24c58f;}
.vr3-risk-legend b{color:var(--vr-ink);font-size:7px;}
.vr3-recent-activity{
  grid-column:1;
  grid-row:3;
  padding:14px 15px;
}
.vr3-recent-activity>div{
  min-height:27px;
  display:grid;
  grid-template-columns:7px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  border-bottom:1px solid #edf2f7;
  color:#617894;
  font-size:7px;
}
.vr3-recent-activity>div:last-child{border-bottom:0;}
.vr3-recent-activity i{width:7px;height:7px;border-radius:50%;}
.vr3-recent-activity i.blue{background:#357dff;}
.vr3-recent-activity i.orange{background:#ff9d24;}
.vr3-recent-activity i.green{background:#24c58f;}
.vr3-recent-activity i.red{background:#ff5966;}
.vr3-recent-activity em{color:#9aabc0;font-size:6px;font-style:normal;}
.vr3-top-frameworks{
  grid-column:2;
  grid-row:3;
  padding:14px 15px;
}
.vr3-top-frameworks>div{
  min-height:27px;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 25px;
  gap:7px;
  align-items:center;
}
.vr3-top-frameworks>div>span{
  display:flex;
  align-items:center;
  gap:5px;
  color:#57708f;
  font-size:7px;
}
.vr3-top-frameworks>div>span i{width:6px;height:6px;border-radius:50%;}
.vr3-top-frameworks .cyan{background:#32c9e2;}
.vr3-top-frameworks .blue{background:#5b8cff;}
.vr3-top-frameworks .green{background:#25c58d;}
.vr3-top-frameworks .orange{background:#ff9b35;}
.vr3-top-frameworks b{
  position:relative;
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:#edf2f7;
}
.vr3-top-frameworks b u{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--w);
  border-radius:inherit;
  background:linear-gradient(90deg,#25c4c9,#367cff);
  text-decoration:none;
}
.vr3-top-frameworks em{color:var(--vr-ink);font-size:6px;font-style:normal;font-weight:850;}
.vr3-visibility-grid{
  max-width:940px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px 28px;
  margin:38px auto 0;
}
.vr3-visibility-grid article{text-align:center;}
.vr3-visibility-grid i{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin:0 auto 10px;
  border-radius:15px;
  color:#2584ff;
  background:#eaf4ff;
  box-shadow:0 10px 22px rgba(30,98,171,.06);
}
.vr3-visibility-grid i.red{color:#ff5363;background:#fff0f2;}
.vr3-visibility-grid i.orange{color:#f6a02b;background:#fff5e7;}
.vr3-visibility-grid svg{width:23px;height:23px;}
.vr3-visibility-grid strong{
  display:block;
  color:var(--vr-ink);
  font-size:12px;
  line-height:1.38;
}

@media (max-width:1120px){
  .vr3-hero-layout{grid-template-columns:minmax(360px,.9fr) minmax(450px,1.1fr);width:min(1040px,calc(100% - 48px));gap:40px;}
  .vr3-hero-copy h1{font-size:clamp(46px,5.4vw,64px);}
  .vr3-dashboard{grid-template-columns:120px minmax(0,1fr);}
}
@media (max-width:920px){
  .vr3-hero{min-height:auto;}
  .vr3-hero-layout{grid-template-columns:1fr;width:min(760px,calc(100% - 36px));padding:60px 0 68px;}
  .vr3-hero-copy{max-width:680px;}
  .vr3-hero-visual{width:min(590px,100%);margin:0 auto;}
  .vr3-dashboard{grid-template-columns:84px minmax(0,1fr);}
  .vr3-dashboard-sidebar a{font-size:0;justify-content:center;}
  .vr3-dashboard-sidebar a svg{width:16px;height:16px;}
  .vr3-dashboard-content{grid-template-columns:minmax(0,1fr) 190px;}
}
@media (max-width:720px){
  .vr3-hero-layout{width:calc(100% - 28px);gap:34px;}
  .vr3-hero-copy h1{font-size:clamp(43px,12.8vw,58px);}
  .vr3-hero-copy p{font-size:15px;}
  .vr3-hero-visual{grid-template-rows:132px 82px 145px;gap:11px 12px;}
  .vr3-task-card{width:90%;}
  .vr3-framework-card{width:94%;}
  .vr3-dashboard-section{padding:64px 0 70px;}
  .vr3-dashboard{grid-template-columns:58px minmax(0,1fr);}
  .vr3-dashboard-sidebar{padding-inline:6px;}
  .vr3-dashboard-logo{font-size:0;margin:0 0 18px;text-align:center;}
  .vr3-dashboard-logo::after{content:"XZ";font-size:13px;letter-spacing:0;}
  .vr3-dashboard-sidebar>small{display:none;}
  .vr3-dashboard-content{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:12px;}
  .vr3-dashboard-left{grid-column:1;grid-row:1 / span 2;grid-template-rows:104px 175px;}
  .vr3-risk-overview{display:none;}
  .vr3-recent-activity{grid-column:1;grid-row:3;}
  .vr3-top-frameworks{display:none;}
  .vr3-dashboard-toolbar button{display:none;}
  .vr3-visibility-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 8px;}
  .vr3-visibility-grid strong{font-size:10px;}
}
@media (max-width:500px){
  .vr3-hero-layout{width:calc(100% - 24px);}
  .vr3-hero-copy h1{font-size:41px;}
  .vr3-hero-visual{grid-template-columns:1fr 1fr;grid-template-rows:120px 74px 140px;}
  .vr3-metric-card{padding:11px;}
  .vr3-semi-gauge{transform:scale(.86);transform-origin:center top;margin-bottom:-7px;}
  .vr3-task-card{width:100%;padding:9px 11px;}
  .vr3-framework-card{width:100%;padding:11px 12px;}
  .vr3-framework-row{grid-template-columns:70px minmax(0,1fr) 25px;}
  .vr3-dashboard{grid-template-columns:50px minmax(0,1fr);}
  .vr3-dashboard-sidebar a{padding:0;}
  .vr3-kpi-row{grid-template-columns:1fr;}
  .vr3-kpi-row article:nth-child(2){display:none;}
  .vr3-dashboard-left{grid-template-rows:90px 175px;}
  .vr3-recent-activity>div{grid-template-columns:7px 1fr;}
  .vr3-recent-activity em{display:none;}
  .vr3-visibility-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Final proportional tuning against the supplied reference screenshots */
.vr3-hero-copy h1,
.vr3-section-head h2{font-family:"Poppins",Inter,Arial,sans-serif;font-weight:700;}
.vr3-hero-visual{max-width:530px;}
.vr3-framework-card{width:79%;}
.vr3-task-card{width:72%;}
.vr3-dashboard{min-height:516px;}
.vr3-dashboard-content{grid-template-rows:104px 174px 150px;}
.vr3-dashboard-left{grid-template-rows:104px 174px;}
.vr3-risk-donut{width:116px;height:116px;margin-top:15px;}
.vr3-risk-donut span{width:72px;height:72px;}
.vr3-line-chart{height:126px;}
.vr3-line-chart svg{height:105px;}
.vr3-visibility-grid{margin-top:34px;}

/* ==========================================================
   HERO FINAL REBUILD — cohesive reporting dashboard visual
   ========================================================== */
.vr4-hero{
  position:relative;
  min-height:620px;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 81% 40%,rgba(37,129,255,.18),transparent 32%),
    radial-gradient(circle at 94% 83%,rgba(105,69,255,.24),transparent 31%),
    linear-gradient(116deg,#03162f 0%,#062754 58%,#082963 100%);
}
.vr4-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-4;
  opacity:.55;
  background:
    linear-gradient(164deg,transparent 0 70%,rgba(69,149,255,.08) 70.1% 70.3%,transparent 70.4%),
    linear-gradient(170deg,transparent 0 80%,rgba(69,149,255,.05) 80.1% 80.28%,transparent 80.4%);
}
.vr4-hero-bg{
  position:absolute;
  z-index:-3;
  width:660px;
  height:320px;
  right:-160px;
  bottom:-180px;
  border-radius:50%;
  background:rgba(83,58,255,.22);
  filter:blur(95px);
}
.vr4-hero-orbit{
  position:absolute;
  z-index:-2;
  border:1px solid rgba(89,157,255,.10);
  border-radius:50%;
  pointer-events:none;
}
.vr4-orbit-one{width:620px;height:620px;right:-145px;top:-185px;}
.vr4-orbit-two{width:430px;height:430px;right:-24px;top:-78px;border-color:rgba(98,91,255,.10);}

.vr4-hero-layout{
  width:min(1240px,calc(100% - 72px));
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(590px,1.16fr);
  gap:clamp(50px,5vw,84px);
  align-items:center;
  padding:40px 0 72px;
}
.vr4-hero-copy{
  min-width:0;
  max-width:570px;
}
.vr4-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:#5ddcff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.vr4-eyebrow-dot{
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:#22c99a;
  box-shadow:0 0 0 7px rgba(34,201,154,.11);
}
.vr4-eyebrow i{
  width:58px;
  height:1px;
  margin-left:6px;
  background:linear-gradient(90deg,#38d2f4,transparent);
}
.vr4-hero-copy h1{
  margin:0 0 24px;
  color:#fff;
  font-size:clamp(48px,4vw,72px);
  line-height:1.4;
  letter-spacing:-.055em;
}
.vr4-hero-copy h1 span{
  display:block;
  margin-top:-15px;
  color:transparent;
  background:linear-gradient(91deg,#26d2ee 0%,#278dff 48%,#7358ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.vr4-hero-copy p{
  max-width:555px;
  margin:0 0 30px;
  color:#d3dfef;
  font-size:16px;
  line-height:1.72;
}
.vr4-hero-cta{
  min-height:52px;
  padding-inline:24px;
  display:inline-flex;
  align-items:center;
  gap:14px;
}

.vr4-hero-visual{
  position:relative;
  min-width:0;
  min-height:470px;
}
.vr4-report-shell{
  position:absolute;
  left:14px;
  right:18px;
  top:42px;
  height:390px;
  overflow:hidden;
  border:1px solid rgba(132,190,255,.46);
  border-radius:23px;
  background:#f8fbff;
  box-shadow:0 28px 72px rgba(0,11,40,.34);
}
.vr4-report-topbar{
  height:58px;
  display:grid;
  grid-template-columns:94px minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  padding:0 16px;
  color:#fff;
  background:#082b5e;
}
.vr4-report-brand{
  font-size:15px;
  font-weight:900;
  letter-spacing:.11em;
}
.vr4-report-search{
  min-width:0;
  height:34px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 11px;
  border:1px solid rgba(135,190,250,.16);
  border-radius:9px;
  color:#9ebadc;
  background:#12396c;
  font-size:8px;
  overflow:hidden;
  white-space:nowrap;
}
.vr4-report-search svg{width:14px;height:14px;flex:0 0 auto;}
.vr4-live{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 8px;
  border-radius:999px;
  color:#18a878;
  background:#eaf9f4;
  font-size:7px;
  font-weight:850;
}
.vr4-live i{width:6px;height:6px;border-radius:50%;background:#20c78f;}
.vr4-report-body{
  height:calc(100% - 58px);
  padding:18px 19px 17px;
  color:var(--vr-ink);
  background:
    radial-gradient(circle at 100% 0,rgba(54,132,255,.055),transparent 27%),
    #f8fbff;
}
.vr4-report-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.vr4-report-heading small{
  display:block;
  color:#7b8fa9;
  font-size:6px;
  font-weight:800;
  letter-spacing:.12em;
}
.vr4-report-heading h3{
  margin:2px 0 0;
  font-size:18px;
  letter-spacing:-.025em;
}
.vr4-report-heading>span{
  padding:6px 9px;
  border:1px solid #dae5f2;
  border-radius:9px;
  color:#667d9c;
  background:#fff;
  font-size:7px;
}
.vr4-kpi-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:13px;
}
.vr4-kpi-row article{
  min-width:0;
  display:grid;
  grid-template-columns:33px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #dce7f4;
  border-radius:11px;
  background:#fff;
}
.vr4-kpi-icon{
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  border-radius:10px;
}
.vr4-kpi-icon svg{width:15px;height:15px;}
.vr4-kpi-icon.green{color:#18a97b;background:#eaf9f4;}
.vr4-kpi-icon.blue{color:#2b7dff;background:#edf4ff;}
.vr4-kpi-icon.purple{color:#7158ff;background:#f1edff;}
.vr4-kpi-row small,.vr4-kpi-row strong,.vr4-kpi-row em{display:block;}
.vr4-kpi-row small{color:#8193ab;font-size:6px;}
.vr4-kpi-row strong{margin:1px 0;font-size:14px;line-height:1;}
.vr4-kpi-row em{color:#18a97b;font-size:5.5px;font-style:normal;}
.vr4-report-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(185px,.65fr);
  gap:9px;
  margin-top:9px;
}
.vr4-trend-panel,.vr4-report-center{
  height:188px;
  padding:12px 13px;
  border:1px solid #dce7f4;
  border-radius:12px;
  background:#fff;
}
.vr4-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.vr4-panel-head strong{display:block;font-size:8px;}
.vr4-panel-head small{display:block;margin-top:1px;color:#899ab0;font-size:5.5px;}
.vr4-panel-head>b{color:#2b7dff;font-size:6px;}
.vr4-trend-chart{
  position:relative;
  height:118px;
  margin-top:9px;
}
.vr4-chart-lines{
  position:absolute;
  inset:0 0 15px;
  background:repeating-linear-gradient(180deg,transparent 0 25px,#eef3f8 25px 26px);
}
.vr4-chart-bars{
  position:absolute;
  inset:18px 8px 15px;
  display:flex;
  align-items:end;
  gap:8px;
  opacity:.22;
}
.vr4-chart-bars i{
  flex:1;
  height:var(--h);
  border-radius:3px 3px 0 0;
  background:#2b82ff;
}
.vr4-trend-chart svg{
  position:absolute;
  inset:0 0 15px;
  width:100%;
  height:102px;
  overflow:visible;
}
.vr4-trend-chart path{fill:none;stroke:#6e58ff;stroke-width:2.4;}
.vr4-trend-chart circle{fill:#fff;stroke:#6e58ff;stroke-width:2;}
.vr4-chart-months{
  display:flex;
  justify-content:space-between;
  margin-top:-3px;
  color:#94a5b9;
  font-size:5px;
}
.vr4-report-center{padding-inline:12px;}
.vr4-report-row{
  min-height:38px;
  display:grid;
  grid-template-columns:31px minmax(0,1fr) auto;
  gap:7px;
  align-items:center;
  margin-top:7px;
  padding:6px 7px;
  border:1px solid #e1e9f3;
  border-radius:9px;
  background:#fbfdff;
}
.vr4-report-row>span{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#2b7dff;
  background:#edf4ff;
  font-size:7px;
  font-weight:900;
}
.vr4-report-row strong,.vr4-report-row small{display:block;}
.vr4-report-row strong{font-size:6.5px;}
.vr4-report-row small{color:#899ab0;font-size:5px;}
.vr4-report-row em{
  padding:3px 5px;
  border-radius:999px;
  color:#18a97b;
  background:#eaf9f4;
  font-size:5px;
  font-style:normal;
  font-weight:800;
}
.vr4-float{
  position:absolute;
  z-index:5;
  min-width:150px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:15px;
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 44px rgba(0,15,47,.20);
}
.vr4-float-tasks{right:-4px;top:10px;}
.vr4-float-exec{left:-10px;bottom:5px;}
.vr4-float-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:11px;
}
.vr4-float-icon svg{width:17px;height:17px;}
.vr4-float-icon.red{color:#ff5866;background:#fff0f2;}
.vr4-float-icon.blue{color:#2b7dff;background:#edf4ff;}
.vr4-float small,.vr4-float strong,.vr4-float em{display:block;}
.vr4-float small{color:#8798ae;font-size:6.5px;}
.vr4-float strong{margin:1px 0;font-size:13px;line-height:1;}
.vr4-float em{color:#18a97b;font-size:5.5px;font-style:normal;}
.vr4-float-tasks em{color:#ff5866;}

@media (max-width:1180px){
  .vr4-hero-layout{grid-template-columns:minmax(390px,.78fr) minmax(540px,1.22fr);gap:42px;width:min(1120px,calc(100% - 52px));}
  .vr4-hero-copy h1{font-size:clamp(50px,5.2vw,65px);}
}
@media (max-width:980px){
  .vr4-hero{min-height:auto;}
  .vr4-hero-layout{grid-template-columns:1fr;gap:42px;width:min(820px,calc(100% - 40px));padding:64px 0 74px;}
  .vr4-hero-copy{max-width:690px;}
  .vr4-hero-copy h1{font-size:clamp(50px,8vw,68px);}
  .vr4-hero-visual{width:min(720px,100%);margin-inline:auto;}
}
@media (max-width:700px){
  .vr4-hero-layout{width:calc(100% - 28px);padding:54px 0 64px;}
  .vr4-hero-copy h1{font-size:clamp(43px,12vw,58px);}
  .vr4-hero-copy p{font-size:15px;}
  .vr4-hero-visual{min-height:400px;}
  .vr4-report-shell{left:0;right:0;top:28px;height:350px;}
  .vr4-report-topbar{grid-template-columns:auto minmax(0,1fr);}
  .vr4-live{display:none;}
  .vr4-report-body{padding:14px 12px;}
  .vr4-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vr4-kpi-row article:last-child{display:none;}
  .vr4-report-grid{grid-template-columns:1fr;}
  .vr4-report-center{display:none;}
  .vr4-trend-panel{height:176px;}
  .vr4-float-tasks{right:6px;top:4px;transform:scale(.9);transform-origin:top right;}
  .vr4-float-exec{left:6px;bottom:0;transform:scale(.9);transform-origin:bottom left;}
}
@media (max-width:480px){
  .vr4-hero-copy h1{font-size:42px;}
  .vr4-eyebrow{font-size:9px;letter-spacing:.14em;}
  .vr4-eyebrow i{width:32px;}
  .vr4-report-shell{height:325px;}
  .vr4-hero-visual{min-height:375px;}
  .vr4-report-heading h3{font-size:15px;}
  .vr4-report-heading>span{display:none;}
  .vr4-kpi-row article{grid-template-columns:28px minmax(0,1fr);padding:7px;}
  .vr4-kpi-icon{width:28px;height:28px;}
  .vr4-float{min-width:135px;padding:9px 10px;}
}