:root{
  --cp-bg:#080f23;
  --cp-card:#142444;
  --cp-border:rgba(149,187,255,.16);
  --cp-cyan:#53d5ff;
  --cp-violet:#8d79ff;
  --cp-gold:#ffd779;
}

body{
  background:
    radial-gradient(ellipse at 85% 5%,rgba(56,117,218,.19),transparent 36%),
    radial-gradient(ellipse at 15% 95%,rgba(102,68,210,.11),transparent 40%),
    var(--cp-bg);
}

.sidebar{
  background:linear-gradient(180deg,#101c38,#0a142a);
  border-right:1px solid var(--cp-border);
  box-shadow:12px 0 36px rgba(0,0,0,.11);
}

.sidebar nav a{
  display:flex;
  align-items:center;
  min-height:46px;
  border:1px solid transparent;
  transition:background .2s,border-color .2s,transform .2s;
}

.sidebar nav a:hover,
.sidebar nav a[aria-current="page"]{
  background:linear-gradient(105deg,rgba(69,146,255,.17),rgba(109,87,225,.13));
  border-color:rgba(114,169,255,.25);
  color:#fff;
  transform:translateX(3px);
}

.top{
  border-bottom:1px solid rgba(149,187,255,.09);
  margin-bottom:22px;
}

.chip,.user{
  background:linear-gradient(145deg,#1c3055,#152442);
  border-color:var(--cp-border);
  box-shadow:0 5px 16px rgba(0,0,0,.1);
}

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:270px;
  padding:34px;
  background:
    radial-gradient(circle at 90% 25%,rgba(79,186,255,.31),transparent 34%),
    linear-gradient(120deg,#1b3867,#172a54 52%,#121e3b);
  border:1px solid rgba(122,178,255,.3);
  box-shadow:0 20px 60px rgba(0,0,0,.19);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.25) .7px,transparent .7px);
  background-size:27px 27px;
  opacity:.16;
}

.hero h1{
  font-weight:900;
  letter-spacing:-.8px;
  max-width:690px;
}

.hero>p{
  max-width:660px;
}

.panel,.stat,.card{
  border:1px solid var(--cp-border);
  background:linear-gradient(145deg,rgba(26,45,82,.95),rgba(15,27,53,.97));
  box-shadow:0 10px 30px rgba(0,0,0,.09);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}

a.stat:hover,
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(99,199,255,.52);
  box-shadow:0 18px 38px rgba(0,0,0,.2);
}

.stat{
  position:relative;
  overflow:hidden;
}

.stat::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  border-radius:50%;
  right:-35px;
  top:-38px;
  background:rgba(84,174,255,.07);
}

.cta,button{
  box-shadow:0 8px 23px rgba(39,141,234,.2);
  transition:filter .2s,transform .2s;
}

.cta:hover,button:hover{
  filter:brightness(1.12);
  transform:translateY(-2px);
}

.sanchi-guide{
  position:absolute;
  right:30px;
  bottom:0;
  align-items:flex-end;
}

.sanchi-guide img{
  width:clamp(150px,18vw,235px);
  max-width:none;
  max-height:245px;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.22));
}

@media(min-width:1000px){
  .hero:has(.sanchi-guide)>h1,
  .hero:has(.sanchi-guide)>p{
    max-width:calc(100% - 260px);
  }
}

@media(max-width:750px){
  .hero{padding:23px;min-height:240px}
  .sanchi-guide{right:5px}
  .sanchi-guide img{width:115px;max-height:150px}
  .hero:has(.sanchi-guide)>p{max-width:calc(100% - 105px)}
}

@media(prefers-reduced-motion:reduce){
  .sidebar nav a,.panel,.stat,.card,.cta,button{
    transition:none;
  }
}