:root {
  --navy: #111E43;
  --blue: #355EA8;
  --violet: #7356D8;
  --lilac: #C8B7F3;
  --sky: #84B9EA;
  --ink: #111E43;
  --soft: #F7F7FB;
}

body { background: #fff; }
.brand { letter-spacing: 0; }
.brand img { width: 86px; height: 86px; object-fit: contain; display: block; }
.brand-stage {
  background:
    radial-gradient(circle at 72% 16%, rgba(200,183,243,.4), transparent 27%),
    radial-gradient(circle at 18% 85%, rgba(132,185,234,.25), transparent 30%),
    linear-gradient(135deg, #111E43 0%, #1e3268 52%, #7356D8 130%);
  box-shadow: inset 0 0 90px rgba(17,30,67,.3), 0 22px 50px rgba(17,30,67,.12);
}
.brand-stage:before { background: linear-gradient(115deg, rgba(17,30,67,.22), transparent 48%, rgba(200,183,243,.08)); }
.brand-stage img { position: relative; z-index: 1; width: min(72%, 300px); height: auto; filter: drop-shadow(0 14px 24px rgba(3,10,30,.28)); }
.aurora-one { background: radial-gradient(circle at 30% 65%, rgba(132,185,234,.52), rgba(115,86,216,.37) 36%, rgba(200,183,243,.5) 62%, transparent 72%); }
.aurora-two { background: radial-gradient(ellipse, rgba(200,183,243,.42), transparent 70%); }
.button { background: linear-gradient(115deg, #111E43, #355EA8); }
.button-outline { background: rgba(255,255,255,.72); color: #111E43; }
.chart span { background: linear-gradient(#C8B7F3, #7356D8); }
.pill { background: linear-gradient(90deg, #7356D8, #C8B7F3); }
.product-card { background: linear-gradient(105deg, rgba(200,183,243,.42), #F7F7FB 55%, rgba(132,185,234,.28)); }
.final-cta { background: linear-gradient(105deg, #111E43, #355EA8 48%, #7356D8); }
.cta-orbit { border-color: #C8B7F3; box-shadow: 0 0 25px rgba(200,183,243,.8); }
.solutions { background: linear-gradient(#fff, #F7F7FB); }
.dashboard-body aside { background: #F7F7FB; }
.dashboard-body aside strong { background: #111E43; }
@media (max-width: 620px) {
  .brand img { width: 72px; height: 72px; }
  .brand-stage img { width: min(65%, 250px); }

  .site-header { padding-top: 10px; }
  .nav.open { top: 76px; }
  .hero { padding-top: 96px; padding-bottom: 22px; }
  .hero h1 { font-size: clamp(2.75rem, 13vw, 3.35rem); }
  .hero-copy .eyebrow { margin-bottom: 10px; }
  .hero-visual { min-height: 318px; margin-top: 26px; }
  .orbit-a { width: 330px; height: 330px; right: -110px; top: -22px; }
  .orbit-b { width: 245px; height: 245px; right: -35px; top: 30px; }

  .dashboard-window {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    transform: none;
    border-width: 5px;
    border-radius: 20px;
    box-shadow: 0 22px 40px rgba(17,30,67,.22);
  }
  .window-bar { height: 48px; padding: 0 14px; }
  .mini-brand { font-size: .82rem; }
  .avatar { width: 26px; height: 26px; }
  .dashboard-body { display: block; height: 252px; }
  .dashboard-body aside { display: none; }
  .dash-content { padding: 16px; }
  .dash-content small { font-size: .58rem; }
  .dash-content h3 { margin: 3px 0 12px; font-size: 1.08rem; }
  .stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
  .stats div { min-width: 0; padding: 9px 7px; }
  .stats div:last-child { display: block; }
  .stats span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .52rem; }
  .stats b { font-size: .72rem; white-space: nowrap; }
  .chart { height: 103px; margin-top: 11px; padding: 12px; gap: 7px; }

  .benefits { padding-top: 28px; }
  .about { gap: 32px; }
  .product-copy .button { padding-left: 17px; padding-right: 17px; }
  .product-image { min-height: 220px; }
  .final-cta .button { width: 100%; }
}